.section {
  position: relative;
  z-index: 1;
  background-color: #fff;
  color: #2e2e2e;
  overflow: hidden;
}
.section__content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.section__content--width-wide {
  max-width: 1440px;
}
.section__content--width-fluid {
  max-width: 100%;
}
.section__content--spacing {
  margin-top: 100px;
  margin-bottom: 85px;
}
@media screen and (max-width: 1023px) {
  .section__content--spacing {
    margin-top: 50px;
    margin-bottom: 42.5px;
  }
}
.section__content--spacing-low {
  margin-top: 50px;
  margin-bottom: 65px;
}
.section__content--spacing-none {
  margin-top: 0;
  margin-bottom: 0;
}
.section__content--spacing-none-top {
  margin-top: 0;
}
.section__content--spacing-none-bottom {
  margin-bottom: 0;
}
.section__content--centered {
  text-align: center;
}
.section__content--aligned-right {
  text-align: right;
}
.section--bg-light {
  background-color: #fff;
  color: #2e2e2e;
}
.section--bg-gray {
  background-color: #f0f0f0;
  color: #2e2e2e;
}
.section--bg-dark {
  background-color: #121212;
  color: #fff;
}
.section--bg-black {
  background-color: #000;
  color: #fff;
}
.section--hidden {
  display: none;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 2px;
  font-family: soleil, Arial, sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}
.badge.align-middle {
  transform: translateY(-4px);
  vertical-align: middle;
}
.badge.align-top {
  transform: translateY(8px);
  vertical-align: top;
}
.badge.highlight {
  border-color: #ff0;
  background-color: #ff0;
  color: #121212;
}
.badge.neutral {
  border-color: #414141;
  background-color: #414141;
  color: #fff;
}
.badge.space-left {
  margin-left: 10px;
}
.badge.space-right {
  margin-right: 10px;
}
.badge.space-left-big {
  margin-left: 20px;
}
.badge.space-right-big {
  margin-right: 20px;
}
.badge.space-right-small {
  margin-right: 5px;
}
.badge.dot-shape {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0;
}
.grid {
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  padding: 16px 0;
  grid-column-gap: 40px;
  grid-row-gap: 55px;
}
@media screen and (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.grid--gaps-small {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
.grid--spacing-top {
  margin-top: 48px;
}
.grid--spacing-bottom {
  margin-bottom: 48px;
}
.grid--spacing-both {
  margin-top: 48px;
  margin-bottom: 48px;
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 1023px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .grid--2 {
    grid-template-columns: 1fr;
  }
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 1023px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 1023px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .grid--4 {
    grid-template-columns: 1fr;
  }
}
.default-footer {
  background-color: #000;
  overflow: auto;
}
.default-footer__content {
  display: flex;
}
.default-footer__logo {
  display: inline-block;
  width: 60px;
  height: 60px;
  border: 1px solid #fff;
  flex-shrink: 0;
  background: #fff url('/images/homepage/uxpin-black.svg') no-repeat center;
  background-size: 60px;
  text-indent: -9999px;
}
.default-footer__left {
  min-width: 220px;
  flex-basis: 290px;
  flex-grow: 0;
  flex-shrink: 1;
}
@media screen and (max-width: 767px) {
  .default-footer__left {
    flex-basis: auto;
  }
}
@media screen and (max-width: 1023px) {
  .default-footer__left--has-logo {
    display: none;
  }
}
.default-footer__right {
  padding-top: 0;
  padding-bottom: 0;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 0;
}
@media screen and (min-width: 767px) {
  .default-footer__right {
    margin-left: auto;
  }
}
.default-footer__right--one-line {
  display: flex;
}
@media screen and (max-width: 767px) {
  .default-footer__right--one-line {
    flex-direction: column;
    flex-wrap: wrap;
  }
}
.default-footer__legal {
  display: flex;
  padding-top: 40px;
  padding-bottom: 120px;
}
@media screen and (max-width: 973px) {
  .default-footer__legal {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  .default-footer__legal {
    flex-direction: column;
  }
}
.default-footer__legal--padding-minified {
  padding-top: 32px;
  padding-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .default-footer__legal--padding-minified {
    padding-top: 40px;
  }
}
@media screen and (max-width: 766px) {
  .default-footer__language-selector {
    padding: 20px 0;
  }
}
.default-footer__languages {
  list-style: none;
}
.default-footer__languages-list {
  display: flex;
}
.default-footer__languages-link {
  color: #acacac;
  text-decoration: none;
  padding-right: 8px;
}
.default-footer__languages-link:hover {
  text-decoration: underline;
}
.default-footer__languages.selected-lang .default-footer__languages-link {
  color: #fff;
}
.default-footer__link {
  color: #acacac;
  text-decoration: none;
}
.default-footer__link:hover {
  text-decoration: underline;
}
.default-footer__legal-note {
  color: rgba(172, 172, 172, 0.5);
  font-size: 14px;
  line-height: 100%;
}
.default-footer-menu-sitemap {
  margin-bottom: 40px;
  grid-template-columns: repeat(4, 160px);
}
@media screen and (max-width: 1023px) {
  .default-footer-menu-sitemap {
    grid-template-columns: repeat(4, 160px);
  }
}
@media screen and (max-width: 767px) {
  .default-footer-menu-sitemap {
    grid-template-columns: repeat(2, 160px);
  }
}
@media screen and (max-width: 383.5px) {
  .default-footer-menu-sitemap {
    grid-template-columns: 160px;
  }
}
.default-footer-menu-sitemap__title {
  margin-bottom: 18px;
  color: rgba(172, 172, 172, 0.5);
  font-family: soleil, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 32px;
  text-transform: uppercase;
}
.default-footer-menu-sitemap__list {
  flex-direction: column;
  list-style: none;
}
.default-footer-menu-sitemap__link {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
}
.default-footer-menu-legal {
  display: flex;
  margin-right: 20px;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .default-footer-menu-legal {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.default-footer-menu-legal__item {
  margin-right: 20px;
}
.default-footer-menu-legal__link {
  font-size: 14px;
}
.default-footer-menu-social {
  display: flex;
  transform: translateY(4px);
  list-style: none;
}
.default-footer-menu-social__item {
  margin-right: 20px;
}
.default-footer-menu-social__link {
  display: inline-block;
}
.default-footer-menu-social__link:hover {
  opacity: 0.8;
}
.default-footer-menu-social__icon--pull-up {
  transform: translateY(-1px);
}
#enterprise-module .btn {
  display: inline-flex;
  min-width: 200px;
  height: 50px;
  padding: 0 32px;
  border: 1px solid #00f;
  border-radius: 0;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #00f;
  color: #fff;
  font-family: 'Overpass Mono', Inconsolata, 'Courier New', Courier, monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #enterprise-module .btn {
    width: 100%;
  }
}
#enterprise-module .btn:after {
  content: '';
  display: inline-block;
  width: 155px;
  height: 32px;
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: -1;
  background-color: #00f;
  -webkit-mask-image: url('/images/home/btn-shadow-blue.svg');
          mask-image: url('/images/home/btn-shadow-blue.svg');
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-position: center right;
          mask-position: center right;
}
#enterprise-module .btn:hover {
  border-color: #ff0;
  background-color: #ff0;
  color: #00f;
}
#enterprise-module .btn--disabled {
  opacity: 0.33;
  pointer-events: none;
}
#enterprise-module .btn--stretched {
  width: 100%;
  min-width: 0;
  padding: 0 16px;
}
#enterprise-module .btn--small {
  min-width: 0;
  height: 40px;
  padding: 0 24px;
  font-size: 12px;
}
#enterprise-module .btn--small:after {
  width: 124px;
}
#enterprise-module .btn--weight-light:after {
  display: none;
}
#enterprise-module .btn--weight-light:hover {
  border-color: #00f;
}
#enterprise-module .btn--weight-x-light {
  color: #00f;
  background-color: transparent;
}
#enterprise-module .btn--weight-x-light:after {
  display: none;
}
#enterprise-module .btn--weight-x-light:hover {
  border-color: #00f;
}
#enterprise-module .btn--tint-violet {
  border: 1px solid #7800ff;
  background-color: #7800ff;
  color: #fff;
}
#enterprise-module .btn--tint-violet:after {
  background-color: #7800ff;
}
#enterprise-module .btn--tint-violet:hover {
  border-color: #fff;
  background-color: #fff;
  color: #121212;
}
#enterprise-module .btn--tint-violet:hover:after {
  background-color: #fff;
}
#enterprise-module .btn__caption {
  display: block;
  padding: 16px 0;
  color: #8c8c8c;
  font-family: 'Overpass Mono', Inconsolata, 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 22px;
}
#enterprise-module .btn__caption--is-centered {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
#enterprise-module .title {
  margin-bottom: 24px;
  font-size: 48px;
  font-weight: 600;
  line-height: 60px;
  text-align: left;
}
@media screen and (max-width: 1023px) {
  #enterprise-module .title {
    font-size: 32px;
    line-height: 40px;
  }
}
#enterprise-module .title__caption {
  display: block;
  margin-bottom: 10px;
  color: #f0f0f0;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1.5px;
  line-height: 24px;
  text-transform: uppercase;
}
#enterprise-module .subtitle {
  margin-bottom: 24px;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}
@media screen and (max-width: 1023px) {
  #enterprise-module .subtitle {
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 36px;
  }
}
#enterprise-module .title--light,
#enterprise-module .subtitle--light {
  color: #fff;
}
#enterprise-module .title--dark,
#enterprise-module .subtitle--dark {
  color: #2e2e2e;
}
#enterprise-module .title--gray,
#enterprise-module .subtitle--gray {
  color: #6a6a6a;
}
#enterprise-module .title--centered,
#enterprise-module .subtitle--centered {
  text-align: center;
}
#enterprise-module .title--bold,
#enterprise-module .subtitle--bold {
  font-weight: 700;
}
#enterprise-module .title--regular,
#enterprise-module .subtitle--regular {
  font-weight: 400;
}
#enterprise-module .title--thin,
#enterprise-module .subtitle--thin {
  font-weight: 300;
}
#enterprise-module .title--uppercased,
#enterprise-module .subtitle--uppercased {
  text-transform: uppercase;
}
#enterprise-module .title--width-half,
#enterprise-module .subtitle--width-half {
  width: 50%;
}
@media screen and (max-width: 767px) {
  #enterprise-module .title--width-half,
  #enterprise-module .subtitle--width-half {
    width: 100%;
  }
}
#enterprise-module .homepage-fallback .title {
  font-size: 48px;
  line-height: 60px;
}
#enterprise-module .homepage-fallback .subtitle {
  font-size: 24px;
  line-height: 32px;
}
#enterprise-module .homepage-fallback .sub {
  font-size: 28px;
}
#enterprise-module .homepage-fallback .title,
#enterprise-module .homepage-fallback .subtitle {
  margin-bottom: 0;
  font-weight: 600;
  text-align: left;
}
#enterprise-module .homepage-fallback .title.thin,
#enterprise-module .homepage-fallback .subtitle.thin {
  font-weight: 300;
}
#enterprise-module .homepage-fallback .title.bold,
#enterprise-module .homepage-fallback .subtitle.bold {
  font-weight: 700;
}
#enterprise-module .homepage-fallback .title.centered,
#enterprise-module .homepage-fallback .subtitle.centered {
  text-align: center;
}
@media screen and (max-width: 1024px) {
  #enterprise-module .homepage-fallback .title {
    font-size: 36px;
    line-height: 40px;
  }
  #enterprise-module .homepage-fallback .subtitle,
  #enterprise-module .homepage-fallback .sub {
    font-size: 20px;
    line-height: 32px;
  }
}
@media screen and (max-width: 800px) {
  #enterprise-module .homepage-fallback .title {
    font-size: 24px;
    line-height: 36px;
  }
  #enterprise-module .homepage-fallback .sub {
    font-size: 18px;
    line-height: 27px;
  }
}
#enterprise-module .text {
  font-size: 14px;
  line-height: 22px;
}
#enterprise-module .text.bold {
  font-weight: 700;
}
#enterprise-module .text {
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 8px;
}
.get-started-section #enterprise-module .text {
  margin-bottom: 8px !important;
}
#enterprise-module .text--large {
  margin-bottom: 24px;
  font-size: 24px;
  line-height: 36px;
}
@media screen and (max-width: 1023px) {
  #enterprise-module .text--large {
    font-size: 18px;
    line-height: 27px;
  }
}
#enterprise-module .text--dark {
  color: #2e2e2e;
}
#enterprise-module .text--gray {
  color: #acacac;
}
#enterprise-module .text--light {
  color: #fff;
}
#enterprise-module .text--link {
  color: #ff0;
  text-decoration: none;
}
#enterprise-module .text--link:hover {
  text-decoration: underline;
}
#enterprise-module .text--uppercased {
  text-transform: uppercase;
}
#enterprise-module .text--centered {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
#enterprise-module .text--width-narrow {
  width: 65%;
}
@media screen and (max-width: 767px) {
  #enterprise-module .text--width-narrow {
    width: 100%;
  }
}
#enterprise-module .image-with-caption {
  width: 400px;
  margin-bottom: 32px;
  margin-left: auto;
  position: relative;
}
@media screen and (max-width: 1023px) {
  #enterprise-module .image-with-caption {
    width: 250px;
    margin-bottom: 96px;
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .image-with-caption {
    width: 100%;
    max-width: 352px;
    margin-top: 64px;
    margin-right: auto;
    margin-bottom: 128px;
    margin-left: auto;
  }
}
@media screen and (max-width: 1023px) {
  #enterprise-module .image-with-caption__image {
    width: 250px;
    height: 250px;
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .image-with-caption__image {
    width: 196px;
    height: 196px;
  }
}
#enterprise-module .image-with-caption .caption {
  width: 352px;
  height: 160px;
  padding: 32px 32px 32px 0;
  position: absolute;
  bottom: -32px;
  left: -144px;
}
#enterprise-module .image-with-caption .caption:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url('/images/home/pricing-pattern-border-top.png'), url('/images/home/pricing-pattern-border-right.png'), url('/images/home/pricing-pattern-border-bottom.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left top, right 32px, left bottom;
  background-size: 100% 32px, 64px 96px, 100% 32px;
}
@media screen and (max-width: 767px) {
  #enterprise-module .image-with-caption .caption:after {
    width: calc(100% + 32px);
  }
}
@media screen and (max-width: 1023px) {
  #enterprise-module .image-with-caption .caption {
    right: -32px;
    bottom: -96px;
    left: auto;
    left: initial;
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .image-with-caption .caption {
    width: 100%;
    padding-right: 0;
    bottom: -96px;
    left: 0;
  }
}
#enterprise-module .image-with-caption .caption__content {
  display: flex;
  width: 100%;
  height: 100%;
  padding-left: 32px;
  position: relative;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  background-color: #000;
}
#enterprise-module .image-with-caption .caption__name {
  display: block;
  color: #fff;
  font-family: 'Overpass Mono', Inconsolata, 'Courier New', Courier, monospace;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
}
#enterprise-module .image-with-caption .caption__position {
  display: block;
  color: #acacac;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
#enterprise-module .contact-section {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #enterprise-module .contact-section[data-mobile="show"],
  #enterprise-module .contact-section [data-mobile="show"] {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .contact-section[data-mobile="hide"],
  #enterprise-module .contact-section [data-mobile="hide"] {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .contact-section .chat-cta {
    max-width: 352px;
    margin-right: auto;
    margin-left: auto;
  }
}
#enterprise-module .one-col {
  padding: 16px 0;
}
#enterprise-module .one-col--is-centered {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: center;
}
#enterprise-module .one-col--is-wrappable {
  flex-wrap: wrap;
}
#enterprise-module .one-col--padding-none {
  padding: 0;
}
#enterprise-module .one-col--spacing-top {
  margin-top: 48px;
}
#enterprise-module .one-col--spacing-bottom {
  margin-bottom: 48px;
}
#enterprise-module .one-col--spacing-both {
  margin-top: 48px;
  margin-bottom: 48px;
}
#enterprise-module .one-col--spacing-left {
  margin-left: 6px;
}
#enterprise-module .one-col__item {
  width: 50%;
}
@media screen and (max-width: 1023px) {
  #enterprise-module .one-col__item {
    width: 100%;
  }
}
#enterprise-module .one-col__item--wide {
  width: 80%;
}
@media screen and (max-width: 1023px) {
  #enterprise-module .one-col__item--wide {
    width: 100%;
  }
}
#enterprise-module .two-cols {
  display: flex;
  padding: 16px 0;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  #enterprise-module .two-cols[data-mobile="show"],
  #enterprise-module .two-cols [data-mobile="show"] {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .two-cols[data-mobile="hide"],
  #enterprise-module .two-cols [data-mobile="hide"] {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .two-cols {
    flex-wrap: wrap;
  }
}
#enterprise-module .two-cols--is-centered {
  align-items: center;
}
#enterprise-module .two-cols--has-equal-height {
  align-items: stretch;
}
#enterprise-module .two-cols--is-reversed {
  flex-direction: row-reverse;
}
#enterprise-module .two-cols--spacing-top {
  margin-top: 48px;
}
#enterprise-module .two-cols--spacing-bottom {
  margin-bottom: 48px;
}
#enterprise-module .two-cols--spacing-both {
  margin-top: 48px;
  margin-bottom: 48px;
}
#enterprise-module .two-cols__item {
  width: calc(50% - 48px);
}
#enterprise-module .two-cols__item--wide {
  width: 55%;
}
#enterprise-module .two-cols__item--has-no-spacing {
  width: 50%;
}
@media screen and (max-width: 767px) {
  #enterprise-module .two-cols__item {
    width: 100%;
  }
}
#enterprise-module .companies-logos {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex: 1 1 auto;
}
#enterprise-module .companies-logos .companies-title {
  margin-bottom: 50px;
  color: #6a6a6a;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}
#enterprise-module .companies-logos .logos-list {
  display: grid;
  width: 100%;
  align-items: center;
  list-style: none;
  grid-column-gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
@media screen and (max-width: 1023px) {
  #enterprise-module .companies-logos .logos-list {
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 42px;
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .logos-list {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 64px;
  }
}
#enterprise-module .companies-logos .company-logo {
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  align-items: center;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -9999px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media screen {
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo {
    background-repeat: no-repeat;
    background-position: center center;
  }
}
#enterprise-module .companies-logos .company-logo.hbo {
  -webkit-mask-image: url('/images/homepage/pricing/hbo.svg');
          mask-image: url('/images/homepage/pricing/hbo.svg');
  width: 64px;
  height: 27px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.hbo {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/hbo.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.hbo {
    height: 21px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.hbo {
    background-image: url('/images/homepage/pricing/hbo.svg');
  }
}
#enterprise-module .companies-logos .company-logo.paypal {
  -webkit-mask-image: url('/images/homepage/pricing/paypal.svg');
          mask-image: url('/images/homepage/pricing/paypal.svg');
  width: 107px;
  height: 27px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.paypal {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/paypal.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.paypal {
    height: 21px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.paypal {
    background-image: url('/images/homepage/pricing/paypal.svg');
  }
}
#enterprise-module .companies-logos .company-logo.sapient {
  -webkit-mask-image: url('/images/homepage/pricing/sapient.svg');
          mask-image: url('/images/homepage/pricing/sapient.svg');
  width: 95px;
  height: 35px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.sapient {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/sapient.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.sapient {
    height: 28px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.sapient {
    background-image: url('/images/homepage/pricing/sapient.svg');
  }
}
#enterprise-module .companies-logos .company-logo.netflix {
  -webkit-mask-image: url('/images/homepage/pricing/netflix.svg');
          mask-image: url('/images/homepage/pricing/netflix.svg');
  width: 82px;
  height: 22px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.netflix {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/netflix.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.netflix {
    height: 20px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.netflix {
    background-image: url('/images/homepage/pricing/netflix.svg');
  }
}
#enterprise-module .companies-logos .company-logo.microsoft {
  -webkit-mask-image: url('/images/homepage/pricing/microsoft.svg');
          mask-image: url('/images/homepage/pricing/microsoft.svg');
  width: 114px;
  height: 22px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.microsoft {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/microsoft.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.microsoft {
    height: 21px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.microsoft {
    background-image: url('/images/homepage/pricing/microsoft.svg');
  }
}
#enterprise-module .companies-logos .company-logo.sony {
  -webkit-mask-image: url('/images/homepage/pricing/sony.svg');
          mask-image: url('/images/homepage/pricing/sony.svg');
  width: 84px;
  height: 13px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.sony {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/sony.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.sony {
    height: 21px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.sony {
    background-image: url('/images/homepage/pricing/sony.svg');
  }
}
#enterprise-module .companies-logos .company-logo.autodesk {
  -webkit-mask-image: url('/images/homepage/pricing/autodesk.svg');
          mask-image: url('/images/homepage/pricing/autodesk.svg');
  width: 119px;
  height: 21px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.autodesk {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/autodesk.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.autodesk {
    height: 18px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.autodesk {
    background-image: url('/images/homepage/pricing/autodesk.svg');
  }
}
#enterprise-module .companies-logos .company-logo.liquidplanner {
  -webkit-mask-image: url('/images/homepage/pricing/liquidplanner.svg');
          mask-image: url('/images/homepage/pricing/liquidplanner.svg');
  width: 155px;
  height: 20px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.liquidplanner {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/liquidplanner.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.liquidplanner {
    height: 17px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.liquidplanner {
    background-image: url('/images/homepage/pricing/liquidplanner.svg');
  }
}
#enterprise-module .companies-logos .company-logo.sumologic {
  -webkit-mask-image: url('/images/homepage/pricing/sumologic.svg');
          mask-image: url('/images/homepage/pricing/sumologic.svg');
  width: 116px;
  height: 22px;
}
@supports not ((-webkit-mask-image: url('*.svg')) or (mask-image: url('*.svg'))) {
  #enterprise-module .companies-logos .company-logo.sumologic {
    background-color: transparent;
    background-image: url('/images/homepage/pricing/sumologic.svg');
    background-size: contain;
    filter: brightness(0) invert(1);
  }
}
@media screen and (max-width: 767px) {
  #enterprise-module .companies-logos .company-logo.sumologic {
    height: 19px;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #enterprise-module .companies-logos .company-logo.sumologic {
    background-image: url('/images/homepage/pricing/sumologic.svg');
  }
}
#enterprise-module .companies-logos.has-grid .logos-list {
  display: grid;
  max-width: 557px;
  align-content: center;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 64px;
  grid-column-gap: 0;
}
@media (max-width: 767px) {
  #enterprise-module .companies-logos.has-grid .logos-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
#enterprise-module .horizontal-separator {
  border-width: 1px;
  border-style: solid none none;
  border-color: #2e2e2e;
}
#enterprise-module .horizontal-separator--light {
  border-color: #e6e6e6;
}
/* zIndex group */
/* Breakpoints */
/* horizontal lines on both sides of the text */
@keyframes pinPulse {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes border-pulse-mode {
  0%,
  100% {
    border: 5px solid rgba(0, 0, 0, 0.05);
  }
  50% {
    border: 5px solid rgba(0, 0, 0, 0.15);
  }
}
@keyframes blink-opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes max-width {
  100% {
    max-width: 100%;
  }
}
@keyframes animate-hidden {
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes animate-visible {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
/* some merge libraries overrides global styles and our UI is broken - it's workaround */
/* CORE: global styles */
[class*="ds-icon--font__"]:before {
  text-align: center;
  font-family: 'uxpds-icons';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class*="ds-icon--custom__"]:before {
  font-family: "ProximaNova", sans-serif;
}
.ds-icon--font__action-add-random:before {
  content: '\E000';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-prompt-library:before {
  content: '\E049';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-add-to-favorites:before {
  content: '\E001';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-archive:before {
  content: '\E002';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-unarchive:before {
  content: '\E059';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-arrange-left:before {
  content: '\E004';
  color: #919191;
  font-size: 14px;
  transform: rotate(-90deg);
}
.ds-icon--font__action-arrange-right:before {
  content: '\E004';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__action-arrange-top:before {
  content: '\E004';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-arrange-bottom:before {
  content: '\E004';
  color: #919191;
  font-size: 14px;
  transform: rotate(180deg);
}
.ds-icon--font__action-arrange-center-vertical:before {
  content: '\E003';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__action-arrange-center-horizontal:before {
  content: '\E003';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-attach-to-side-right:before {
  content: '\E005';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-attach-to-side-left:before {
  content: '\E005';
  color: #919191;
  font-size: 14px;
  transform: scale(-1, 1);
}
.ds-icon--font__action-autoresize:before {
  content: '\E006';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-break-symbol:before {
  content: '\E007';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-change-project-group:before {
  content: '\E008';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-close:before {
  content: '\E010';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-close-bold:before {
  content: '\E010';
  color: #919191;
  font-size: 14px;
  font-weight: bold;
}
.ds-icon--font__action-close-panel:before {
  content: '\E009';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-detaching-handler:before {
  content: '\E011';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-direction-horizontal:before {
  content: '\E012';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-direction-vertical:before {
  content: '\E013';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-disable:before {
  content: '\E014';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-distribute-horizontal:before {
  content: '\E016';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-distribute-on-grid:before {
  content: '\E015';
  color: #919191;
  font-size: 14px;
  transform: translateX(0.5px);
}
.ds-icon--font__action-distribute-vertical:before {
  content: '\E016';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__action-duplicate:before {
  content: '\E017';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-element-align-bottom:before {
  content: '\E019';
  color: #919191;
  font-size: 11px;
  transform: rotate(-90deg);
}
.ds-icon--font__action-element-align-center-vertical:before {
  content: '\E018';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__action-element-align-center-horizontal:before {
  content: '\E018';
  color: #919191;
  font-size: 11px;
  transform: rotate(90deg);
}
.ds-icon--font__action-element-align-left:before {
  content: '\E019';
  color: #919191;
  font-size: 11px;
  transform: translateX(0.5px);
}
.ds-icon--font__action-element-align-right:before {
  content: '\E019';
  color: #919191;
  font-size: 11px;
  transform: rotate(180deg);
}
.ds-icon--font__action-element-align-top:before {
  content: '\E019';
  color: #919191;
  font-size: 11px;
  transform: rotate(90deg);
}
.ds-icon--font__action-element-flip-horizontal:before {
  content: '\E020';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-element-flip-vertical:before {
  content: '\E020';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__action-enable:before {
  content: '\E021';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-exit:before {
  content: '\E022';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-frame-add:before {
  content: '\E025';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-frame-remove:before {
  content: '\E026';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-filter:before {
  content: '\E024';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-filter-text:before {
  content: '\E023';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-full-screen:before {
  content: '\E027';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-resizing-auto-horizontal:before {
  content: '\E051';
  color: #919191;
  font-size: 14px;
  transform: translateX(0.5px);
}
.ds-icon--font__action-resizing-fill-horizontal:before {
  content: '\E052';
  color: #919191;
  font-size: 14px;
  transform: translateX(0.5px);
}
.ds-icon--font__action-resizing-fixed-horizontal:before {
  content: '\E053';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-resizing-auto-vertical:before {
  content: '\E051';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__action-resizing-fill-vertical:before {
  content: '\E052';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__action-resizing-fixed-vertical:before {
  content: '\E053';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__action-insert-data:before {
  content: '\E028';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-log-out:before {
  content: '\E029';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-mask:before {
  content: '\E030';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-move-behind:before {
  content: '\E031';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-move-by:before {
  content: '\E032';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-move-forward:before {
  content: '\E033';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-move-to:before {
  content: '\E036';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-move-to-back:before {
  content: '\E034';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-move-to-front:before {
  content: '\E035';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-multiproperty-lock:before {
  content: '\E037';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-multiproperty-unlock-borders:before {
  content: '\E038';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-multiproperty-unlock-corners:before {
  content: '\E039';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-next-state:before {
  content: '\E040';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-path-break:before {
  content: '\E041';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-path-default:before {
  content: '\E042';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-path-difference:before {
  content: '\E043';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-path-intersect:before {
  content: '\E044';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-path-subtract:before {
  content: '\E045';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-path-union:before {
  content: '\E046';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-pause:before {
  content: '\E047';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-previous-state:before {
  content: '\E048';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-remove-from-group:before {
  content: '\E050';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-set-content:before {
  content: '\E054';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-set-property:before {
  content: '\E055';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-set-storybook-property:before {
  content: '\E056';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-symbol-sync:before {
  content: '\E058';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__action-switch:before {
  content: '\E057';
  color: #919191;
  font-size: 8px;
}
.ds-icon--font__action-unmask:before {
  content: '\E060';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__adjust-settings:before {
  content: '\E061';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__advanced-animation:before {
  content: '\E062';
  color: #919191;
  font-size: 12px;
}
.ds-icon--font__angle:before {
  content: '\E064';
  color: #919191;
  font-size: 8px;
}
.ds-icon--font__api-request:before {
  content: '\E066';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-left:before {
  content: '\E080';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-right:before {
  content: '\E080';
  color: #919191;
  font-size: 14px;
  transform: rotate(180deg);
}
.ds-icon--font__arrow-up:before {
  content: '\E080';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__arrow-down:before {
  content: '\E080';
  color: #919191;
  font-size: 14px;
  transform: rotate(-90deg);
}
.ds-icon--font__arrow-axis:before {
  content: '\E067';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-enter:before {
  content: '\E068';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-go-back:before {
  content: '\E069';
  color: #919191;
  font-size: 12px;
}
.ds-icon--font__arrow-play:before {
  content: '\E070';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-redo:before {
  content: '\E071';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-repeat:before {
  content: '\E072';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-replace:before {
  content: '\E073';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-retrieve:before {
  content: '\E074';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-rotate:before {
  content: '\E075';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__state-base:before {
  content: '\E286';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-show-vertical:before {
  content: '\E076';
  color: #919191;
  font-size: 9px;
}
.ds-icon--font__arrow-show-horizontal:before {
  content: '\E076';
  color: #919191;
  font-size: 9px;
  transform: rotate(90deg);
}
.ds-icon--font__arrow-size:before {
  content: '\E077';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-thin-left:before {
  content: '\E078';
  color: #919191;
  font-size: 14px;
  transform: rotate(180deg);
}
.ds-icon--font__arrow-thin-right:before {
  content: '\E078';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__arrow-thin-up:before {
  content: '\E078';
  color: #919191;
  font-size: 14px;
  transform: rotate(-90deg);
}
.ds-icon--font__arrow-thin-down:before {
  content: '\E078';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__arrow-undo:before {
  content: '\E079';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-apple:before {
  content: '\E081';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-google-simple:before {
  content: '\E082';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-google:before {
  content: '\E083';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-npm:before {
  content: '\E084';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-react:before {
  content: '\E085';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-sketch:before {
  content: '\E086';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-slack:before {
  content: '\E087';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-storybook:before {
  content: '\E088';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-twitter:before {
  content: '\E089';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__brand-uxpin:before {
  content: '\E090';
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: transparent;
  color: rgba(0, 0, 0, 0.4);
  font-size: 10px;
}
.ds-icon--font__brand-windows:before {
  content: '\E091';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__building:before {
  content: '\E092';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__bulb:before {
  content: '\E093';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__calendar:before {
  content: '\E095';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__calendar-grey:before {
  content: '\E094';
  color: #919191;
  font-size: 16px;
}
.ds-icon--font__changelog:before {
  content: '\E096';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__chevron-down:before {
  content: '\E097';
  color: #919191;
  font-size: 7px;
}
.ds-icon--font__chevron-up:before {
  content: '\E097';
  color: #919191;
  font-size: 7px;
  transform: rotate(180deg);
}
.ds-icon--font__chevron-left:before {
  content: '\E097';
  color: #919191;
  font-size: 7px;
  transform: rotate(90deg);
}
.ds-icon--font__chevron-right:before {
  content: '\E097';
  color: #919191;
  font-size: 7px;
  transform: rotate(-90deg);
}
.ds-icon--font__clock:before {
  content: '\E098';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__code-block:before {
  content: '\E099';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__code-inline:before {
  content: '\E100';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__color-drop:before {
  content: '\E101';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__color-gradient-angle:before {
  content: '\E102';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__color-gradient-linear:before {
  content: '\E103';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__color-gradient-radial:before {
  content: '\E104';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__color-solid:before {
  content: '\E105';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__colors-dropper:before {
  content: '\E106';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__colors-schemes:before {
  content: '\E107';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__colors-swatches:before {
  content: '\E108';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__connection-connected:before {
  content: '\E109';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__connection-disconnected:before {
  content: '\E110';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__connection-locally:before {
  content: '\E111';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__corner-top-left:before {
  content: '\E112';
  color: #919191;
  font-size: 7px;
  transform: rotate(90deg);
}
.ds-icon--font__corner-top-right:before {
  content: '\E112';
  color: #919191;
  font-size: 7px;
  transform: rotate(180deg);
}
.ds-icon--font__corner-bottom-right:before {
  content: '\E112';
  color: #919191;
  font-size: 7px;
  transform: rotate(270deg);
}
.ds-icon--font__corner-bottom-left:before {
  content: '\E112';
  color: #919191;
  font-size: 7px;
}
.ds-icon--font__cursor-crosshair:before {
  content: '\E113';
  color: #919191;
  font-size: 12px;
}
.ds-icon--font__cursor-default:before {
  content: '\E114';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__cursor-pointer:before {
  content: '\E115';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__desktop-app:before {
  content: '\E116';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__dollar:before {
  content: '\E117';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__dot:before {
  content: '\E119';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__dot-grey:before {
  content: '\E118';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__dots-horizontal:before {
  content: '\E120';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__dots-vertical:before {
  content: '\E120';
  color: #919191;
  font-size: 14px;
  transform: rotate(90deg);
}
.ds-icon--font__elements-audio:before {
  content: '\E124';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-flexbox:before {
  content: '\E121';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-html:before {
  content: '\E122';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-text-merge:before {
  content: '\E123';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-box:before {
  content: '\E127';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-box-with-label:before {
  content: '\E126';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-box-rounded:before {
  content: '\E125';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-button:before {
  content: '\E128';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-checkbox:before {
  content: '\E129';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-circle:before {
  content: '\E130';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-component-from-library:before {
  content: '\E132';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-code-component:before {
  content: '\E131';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-element:before {
  content: '\E133';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-frame:before {
  content: '\E134';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-generic:before {
  content: '\E135';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-grid:before {
  content: '\E139';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-grid-layout:before {
  content: '\E137';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-grid-baseline:before {
  content: '\E136';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-grid-square:before {
  content: '\E138';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-hotspot:before {
  content: '\E140';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-icon:before {
  content: '\E141';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-image:before {
  content: '\E142';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-input:before {
  content: '\E143';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-line:before {
  content: '\E144';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-merge-user-pattern:before {
  content: '\E148';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-merge-pattern:before {
  content: '\E147';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-merge-mui:before {
  content: '\E145';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-merge-shadcn:before {
  content: '\E146';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-multi-select:before {
  content: '\E149';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-multistates:before {
  content: '\E151';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-multistates-edit:before {
  content: '\E150';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-navigation:before {
  content: '\E152';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-note:before {
  content: '\E153';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-path:before {
  content: '\E154';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-pencil:before {
  content: '\E155';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-radio:before {
  content: '\E156';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-select-list:before {
  content: '\E157';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-slice:before {
  content: '\E158';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-storybook:before {
  content: '\E159';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-symbol:before {
  content: '\E160';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-table:before {
  content: '\E161';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-text-block:before {
  content: '\E162';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-text-element:before {
  content: '\E163';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-text-experimental-element:before {
  content: '\E164';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-textarea:before {
  content: '\E165';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-triangle:before {
  content: '\E167';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-tooltip:before {
  content: '\E166';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-unsymbol:before {
  content: '\E168';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__elements-video:before {
  content: '\E169';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__endpoint-empty-circle:before {
  content: '\E170';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-empty-rectangle:before {
  content: '\E171';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-empty-rhomb:before {
  content: '\E172';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-empty-triangle:before {
  content: '\E173';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-filled-arrow:before {
  content: '\E174';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-filled-circle:before {
  content: '\E175';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-filled-rectangle:before {
  content: '\E176';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-filled-rhomb:before {
  content: '\E177';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-filled-triangle:before {
  content: '\E178';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-line:before {
  content: '\E179';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-mirrored-triangle:before {
  content: '\E180';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-none:before {
  content: '\E181';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__endpoint-opened-triangle:before {
  content: '\E182';
  color: #5e5e5e;
  font-size: 16px;
}
.ds-icon--font__exclamation-mark:before {
  content: '\E183';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__expander-collapsed:before {
  content: '\E184';
  color: #919191;
  font-size: 5px;
  transform: rotate(-90deg);
}
.ds-icon--font__expander-expanded:before {
  content: '\E184';
  color: #919191;
  font-size: 5px;
}
.ds-icon--font__external-link:before {
  content: '\E185';
  color: #919191;
  font-size: 12px;
}
.ds-icon--font__feature-accessibility:before {
  content: '\E186';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-animations:before {
  content: '\E187';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-approval:before {
  content: '\E188';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-auto-backup:before {
  content: '\E189';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-chat:before {
  content: '\E190';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-comments:before {
  content: '\E191';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-community:before {
  content: '\E192';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-discussion:before {
  content: '\E193';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__feature-uxpin-docs:before {
  content: '\E207';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-documentation:before {
  content: '\E194';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-grid:before {
  content: '\E195';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-iteration:before {
  content: '\E196';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-layers:before {
  content: '\E197';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-overview:before {
  content: '\E203';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-overview-big:before {
  content: '\E200';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-overview-medium:before {
  content: '\E201';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-overview-small:before {
  content: '\E202';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-responsive:before {
  content: '\E204';
  color: #919191;
  font-size: 10px;
}
.ds-icon--font__feature-sitemap:before {
  content: '\E205';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-live-presentation:before {
  content: '\E198';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-mobile:before {
  content: '\E199';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-usability-testing:before {
  content: '\E206';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__feature-version-control:before {
  content: '\E208';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__files-download:before {
  content: '\E022';
  color: #919191;
  font-size: 14px;
  transform: rotate(-90deg);
}
.ds-icon--font__files-download-cloud:before {
  content: '\E209';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__files-upload:before {
  content: '\E210';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__folder-closed:before {
  content: '\E213';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__folder-closed-outline:before {
  content: '\E212';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__folder-opened:before {
  content: '\E214';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__font-adobe:before {
  content: '\E215';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__font-local:before {
  content: '\E216';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__font-uploaded:before {
  content: '\E217';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__gap-horizontal:before {
  content: '\E218';
  color: #919191;
  font-size: 8px;
}
.ds-icon--font__gap-vertical:before {
  content: '\E219';
  color: #919191;
  font-size: 8px;
}
.ds-icon--font__gear:before {
  content: '\E220';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__git:before {
  content: '\E221';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__stackblitz:before {
  content: '\E283';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__quickstart:before {
  content: '\E268';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__watchvid:before {
  content: '\E346';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__link-html:before {
  content: '\E240';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__html-el:before {
  content: '\E225';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__header-html:before {
  content: '\E223';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__grid:before {
  content: '\E222';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__flexbox:before {
  content: '\E211';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__ai:before {
  content: '\E063';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__tailwind:before {
  content: '\E309';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__antd:before {
  content: '\E065';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__react-bootstrap:before {
  content: '\E269';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__heart:before {
  content: '\E224';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__info-simple:before {
  content: '\E226';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__info-warning:before {
  content: '\E227';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__info-warning-bold:before {
  content: '\E227';
  color: #919191;
  font-size: 14px;
  font-weight: bold;
}
.ds-icon--font__key-arrow-all:before {
  content: '\E228';
  color: #919191;
  font-size: 12px;
}
.ds-icon--font__keyboard:before {
  content: '\E229';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__laptop:before {
  content: '\E230';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__layout-list:before {
  content: '\E231';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__layout-medium-tile:before {
  content: '\E233';
  color: #919191;
  font-size: 13px;
}
.ds-icon--font__layout-medium-tile-outline:before {
  content: '\E232';
  color: #919191;
  font-size: 13px;
}
.ds-icon--font__layout-small-tile:before {
  content: '\E234';
  color: #919191;
  font-size: 13px;
}
.ds-icon--font__libraries-design-libraries:before {
  content: '\E235';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__libraries-more:before {
  content: '\E236';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__libraries-simple:before {
  content: '\E237';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__link-chain:before {
  content: '\E239';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__link-chain-break:before {
  content: '\E238';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__list-indentation-add:before {
  content: '\E241';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__list-indentation-remove:before {
  content: '\E242';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__list-ordered:before {
  content: '\E243';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__list-unordered:before {
  content: '\E244';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__mail:before {
  content: '\E245';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__mask:before {
  content: '\E246';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__media-pause:before {
  content: '\E247';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__media-play:before {
  content: '\E248';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__media-stop:before {
  content: '\E249';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__minus-outline:before {
  content: '\E250';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__moon:before {
  content: '\E251';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__opacity:before {
  content: '\E252';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__options-view:before {
  content: '\E253';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__padlock-broken:before {
  content: '\E254';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__padlock-locked:before {
  content: '\E255';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__padlock-unlocked:before {
  content: '\E256';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__pencil:before {
  content: '\E258';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__piggy-bank:before {
  content: '\E259';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__pen-tool:before {
  content: '\E257';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__pin-map:before {
  content: '\E261';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__pin-map-solid:before {
  content: '\E260';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__pin-simple:before {
  content: '\E262';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__plugins:before {
  content: '\E263';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__plus:before {
  content: '\E265';
  color: #919191;
  font-size: 8px;
}
.ds-icon--font__plus-outline:before {
  content: '\E264';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__question-mark:before {
  content: '\E267';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__question-mark-solid:before {
  content: '\E266';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__scroll-to:before {
  content: '\E270';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__search:before {
  content: '\E271';
  color: #919191;
  font-size: 12px;
}
.ds-icon--font__settings:before {
  content: '\E272';
  color: #919191;
  font-size: 12px;
}
.ds-icon--font__shape-diamond:before {
  content: '\E273';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__shape-rhombus:before {
  content: '\E274';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__shape-star:before {
  content: '\E275';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__shape-triangle-right-angled:before {
  content: '\E276';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__shape-triangle:before {
  content: '\E277';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__share-closed:before {
  content: '\E278';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__share-opened:before {
  content: '\E279';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__shopping-cart:before {
  content: '\E280';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__sound-mute:before {
  content: '\E281';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__sound-unmute:before {
  content: '\E282';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__star-outline:before {
  content: '\E284';
  color: #63ad0e;
  font-size: 14px;
}
.ds-icon--font__star-solid:before {
  content: '\E285';
  color: #63ad0e;
  font-size: 14px;
}
.ds-icon--font__status-approved-solid:before {
  content: '\E287';
  color: #63ad0e;
  font-size: 14px;
}
.ds-icon--font__status-approved:before {
  content: '\E288';
  color: #63ad0e;
  font-size: 14px;
}
.ds-icon--font__status-paused:before {
  content: '\E289';
  color: #a6a6a6;
  font-size: 14px;
}
.ds-icon--font__status-progress:before {
  content: '\E290';
  color: #a6a6a6;
  font-size: 14px;
}
.ds-icon--font__status-rejected-solid:before {
  content: '\E291';
  color: #fb0d00;
  font-size: 14px;
}
.ds-icon--font__status-rejected:before {
  content: '\E292';
  color: #fb0d00;
  font-size: 14px;
}
.ds-icon--font__status-waiting:before {
  content: '\E293';
  color: #ffc000;
  font-size: 14px;
}
.ds-icon--font__stroke-end-butt:before {
  content: '\E295';
  color: #919191;
  font-size: 14px;
  top: 1px;
}
.ds-icon--font__stroke-end-round:before {
  content: '\E296';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__stroke-end-square:before {
  content: '\E297';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__stroke-join-bevel:before {
  content: '\E299';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__stroke-join-miter:before {
  content: '\E300';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__stroke-center:before {
  content: '\E294';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__stroke-inside:before {
  content: '\E298';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__stroke-outside:before {
  content: '\E302';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__stroke-join-round:before {
  content: '\E301';
  color: #919191;
  font-size: 11px;
}
.ds-icon--font__stroke-point-asymmetric:before {
  content: '\E303';
  color: #919191;
  font-size: 13px;
}
.ds-icon--font__stroke-point-disconnected:before {
  content: '\E304';
  color: #919191;
  font-size: 13px;
}
.ds-icon--font__stroke-point-mirrored:before {
  content: '\E305';
  color: #919191;
  font-size: 13px;
}
.ds-icon--font__stroke-point-straight:before {
  content: '\E306';
  color: #919191;
  font-size: 13px;
}
.ds-icon--font__sun:before {
  content: '\E308';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__sun-half:before {
  content: '\E307';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__thunder:before {
  content: '\E310';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__ticker:before {
  content: '\E311';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__tooltip-left:before {
  content: '\E312';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__tooltip-right:before {
  content: '\E312';
  color: #919191;
  font-size: 14px;
  transform: rotate(180deg);
}
.ds-icon--font__tooltip-top:before {
  content: '\E313';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__tooltip-bottom:before {
  content: '\E313';
  color: #919191;
  font-size: 14px;
  transform: rotate(180deg);
}
.ds-icon--font__trash:before {
  content: '\E314';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__tutorial-text:before {
  content: '\E315';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-align-center:before {
  content: '\E316';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-align-justify:before {
  content: '\E317';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-align-left:before {
  content: '\E318';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-align-right:before {
  content: '\E318';
  color: #919191;
  font-size: 14px;
  transform: rotate(180deg);
}
.ds-icon--font__typography-auto-height:before {
  content: '\E319';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-auto-width:before {
  content: '\E320';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-bold:before {
  content: '\E321';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-capitalize:before {
  content: '\E322';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-fixed-size:before {
  content: '\E323';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-fixed-width:before {
  content: '\E324';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-font-size:before {
  content: '\E325';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-fraction:before {
  content: '\E326';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-italic:before {
  content: '\E327';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-letter-spacing:before {
  content: '\E328';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-ligature:before {
  content: '\E329';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-line-height:before {
  content: '\E330';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-lowercase:before {
  content: '\E331';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-small-caps:before {
  content: '\E332';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-strike:before {
  content: '\E333';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-superscription:before {
  content: '\E335';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-subscription:before {
  content: '\E334';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-underline:before {
  content: '\E336';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-uppercase:before {
  content: '\E337';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-vertical-align-bottom:before {
  content: '\E339';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-vertical-align-center:before {
  content: '\E338';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__typography-vertical-align-top:before {
  content: '\E339';
  color: #919191;
  font-size: 14px;
  transform: rotate(180deg);
}
.ds-icon--font__user-add:before {
  content: '\E340';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__user-simple:before {
  content: '\E341';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__variable:before {
  content: '\E342';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__visibility-hidden:before {
  content: '\E343';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__visibility-toggle:before {
  content: '\E344';
  color: #919191;
  font-size: 14px;
}
.ds-icon--font__visibility-visible:before {
  content: '\E345';
  color: #919191;
  font-size: 14px;
}
.ds-icon--custom__element-line:before {
  content: '';
  width: 10px;
  height: 1px;
  transform: rotate(-45deg);
  background: #919191;
}
.ds-icon--custom__element-hr:before {
  content: '\2014';
  color: #919191;
  font-size: 17px;
  font-weight: bold;
}
.ds-icon--custom__key-alt:before {
  content: 'Alt';
  color: #fff;
  font-size: 12px;
  font-family: "ProximaNova", sans-serif;
}
.mac .ds-icon--custom__key-alt:before {
  content: '\2325';
  font-size: 10px;
}
.ds-icon--custom__key-cmd:before {
  content: 'Ctrl';
  color: #fff;
  font-size: 12px;
  font-family: "ProximaNova", sans-serif;
}
.mac .ds-icon--custom__key-cmd:before {
  content: '\2318';
}
.ds-icon--custom__key-shift:before {
  content: 'Shift';
  color: #fff;
  font-size: 12px;
  font-family: "ProximaNova", sans-serif;
}
.mac .ds-icon--custom__key-shift:before {
  content: '\21E7';
  font-size: 10px;
}
.ds-icon--custom__minus:before {
  content: '-';
  color: #919191;
  font-size: 14px;
}
.ds-icon--custom__typography-h1:before {
  content: 'H1';
  color: #919191;
  font-size: 14px;
}
.ds-icon--custom__typography-h2:before {
  content: 'H2';
  color: #919191;
  font-size: 14px;
}
.ds-icon--custom__typography-h3:before {
  content: 'H3';
  color: #919191;
  font-size: 14px;
}
.ds-icon--custom__typography-blockquote:before {
  content: '\0201D';
  color: #919191;
  font-size: 26px;
}
.ds-icon--size-parent:before {
  font-size: inherit;
}
.ds-icon--size-xs:before {
  font-size: 10px;
}
.ds-icon--size-s:before {
  font-size: 12px;
}
.ds-icon--size-m:before {
  font-size: 14px;
}
.ds-icon--size-l:before {
  font-size: 16px;
}
.ds-action-icon-base {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: flex;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: transparent;
  color: #5e5e5e;
  text-decoration: none;
  cursor: pointer;
}
.ds-action-icon-base:before,
.ds-action-icon-base:after {
  box-sizing: border-box;
}
.ds-action-icon-base:active,
.ds-action-icon-base:focus {
  outline: none;
}
.ds-action-icon-base:hover,
.ds-action-icon-base.ds-util-is-marked {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
}
.ds-action-icon-base:active,
.ds-action-icon-base.ds-util-is-active {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1);
}
.ds-action-icon-base--size-s {
  width: 24px;
  height: 24px;
}
.ds-action-icon-base--size-s.ds-action-icon-base--is-working:after {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}
.ds-action-icon-base--size-s:before {
  font-size: 12px;
}
.ds-action-icon-base--size-xs {
  width: 18px;
  height: 18px;
}
.ds-action-icon-base--size-xs.ds-action-icon-base--is-working:after {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-width: 1px;
}
.ds-action-icon-base--weight-light.ds-action-icon-base--size-xs.ds-action-icon-base--is-working:after {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-base--size-xs.ds-action-icon-base--is-working:after {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}
.ds-action-icon-base--size-xs:before {
  font-size: 8px;
}
.ds-action-icon-base--weight-light.ds-action-icon-base--size-xs:before {
  font-size: 10px;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-base--size-xs:before {
  font-size: 10px;
}
.ds-action-icon-base--stretched {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border-radius: initial;
}
.ds-action-icon-base--style-approve {
  border-color: rgba(113, 197, 16, 0.3);
  color: #71c510;
}
.ds-action-icon-base--style-approve:hover,
.ds-action-icon-base--style-approve.ds-util-is-marked {
  border-color: rgba(113, 197, 16, 0.3);
  background-color: rgba(113, 197, 16, 0.05);
}
.ds-action-icon-base--style-approve:active,
.ds-action-icon-base--style-approve.ds-util-is-active {
  border-color: #71c510;
  background-color: #71c510;
  color: #fff;
}
.ds-action-icon-base--style-chameleon {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.ds-action-icon-base--style-chameleon:hover,
.ds-action-icon-base--style-chameleon.ds-util-is-marked {
  background-color: rgba(255, 255, 255, 0.2);
}
.ds-action-icon-base--style-chameleon:active,
.ds-action-icon-base--style-chameleon.ds-util-is-active {
  background-color: rgba(255, 255, 255, 0.3);
}
.ds-action-icon-base--style-destructive {
  border-color: rgba(251, 13, 0, 0.15);
  color: #fb0d00;
}
.ds-action-icon-base--style-destructive:hover,
.ds-action-icon-base--style-destructive.ds-util-is-marked {
  border-color: rgba(251, 13, 0, 0.15);
  background-color: rgba(251, 13, 0, 0.05);
}
.ds-action-icon-base--style-destructive:active,
.ds-action-icon-base--style-destructive.ds-util-is-active {
  border-color: rgba(251, 13, 0, 0.15);
  background-color: rgba(251, 13, 0, 0.1);
  color: #fb0d00;
}
.ds-action-icon-base--weight-light {
  border: none;
}
.ds-action-icon-base--weight-light:hover,
.ds-action-icon-base--weight-light.ds-util-is-marked {
  background-color: rgba(0, 0, 0, 0.05);
}
.ds-action-icon-base--weight-light:active,
.ds-action-icon-base--weight-light.ds-util-is-active {
  background-color: rgba(0, 0, 0, 0.1);
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-approve {
  color: #5e5e5e;
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-approve:hover,
.ds-action-icon-base--weight-light.ds-action-icon-base--style-approve.ds-util-is-marked {
  background-color: rgba(0, 0, 0, 0.05);
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-approve:active,
.ds-action-icon-base--weight-light.ds-action-icon-base--style-approve.ds-util-is-active {
  background-color: #71c510;
  color: #fff;
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-destructive {
  color: #5e5e5e;
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-destructive:hover,
.ds-action-icon-base--weight-light.ds-action-icon-base--style-destructive.ds-util-is-marked {
  background-color: rgba(0, 0, 0, 0.05);
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-destructive:active,
.ds-action-icon-base--weight-light.ds-action-icon-base--style-destructive.ds-util-is-active {
  background-color: rgba(251, 13, 0, 0.05);
  color: #e20c00;
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-chameleon {
  color: #fff;
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-chameleon:hover,
.ds-action-icon-base--weight-light.ds-action-icon-base--style-chameleon.ds-util-is-marked {
  background-color: rgba(255, 255, 255, 0.2);
}
.ds-action-icon-base--weight-light.ds-action-icon-base--style-chameleon:active,
.ds-action-icon-base--weight-light.ds-action-icon-base--style-chameleon.ds-util-is-active {
  background-color: rgba(255, 255, 255, 0.3);
}
.ds-action-icon-base--weight-x-light {
  border: none;
}
.ds-action-icon-base--weight-x-light:hover,
.ds-action-icon-base--weight-x-light.ds-util-is-marked {
  background-color: transparent;
}
.ds-action-icon-base--weight-x-light:active,
.ds-action-icon-base--weight-x-light.ds-util-is-active {
  background-color: transparent;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-approve {
  color: #5e5e5e;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-approve:hover,
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-approve.ds-util-is-marked {
  background-color: transparent;
  color: #71c510;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-approve:active,
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-approve.ds-util-is-active {
  background-color: transparent;
  color: #63ad0e;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-destructive {
  color: #5e5e5e;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-destructive:hover,
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-destructive.ds-util-is-marked {
  background-color: transparent;
  color: #fb0d00;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-destructive:active,
.ds-action-icon-base--weight-x-light.ds-action-icon-base--style-destructive.ds-util-is-active {
  background-color: transparent;
  color: #e20c00;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-style-chameleon {
  color: #fff;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-style-chameleon:hover,
.ds-action-icon-base--weight-x-light.ds-action-icon-style-chameleon.ds-util-is-marked {
  background-color: transparent;
}
.ds-action-icon-base--weight-x-light.ds-action-icon-style-chameleon:active,
.ds-action-icon-base--weight-x-light.ds-action-icon-style-chameleon.ds-util-is-active {
  background-color: transparent;
}
.ds-action-icon-base:disabled,
.ds-action-icon-base.ds-util-is-disabled {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-action-icon-base:disabled,
.ds-action-icon-base.ds-util-is-disabled,
.ds-action-icon-base:disabled:hover,
.ds-action-icon-base.ds-util-is-disabled:hover,
.ds-action-icon-base:disabled.ds-util-is-marked,
.ds-action-icon-base.ds-util-is-disabled.ds-util-is-marked {
  color: #c0c0c0;
}
.ds-action-icon-base:disabled:active:not(.ds-action-icon-base--weight-x-light),
.ds-action-icon-base.ds-util-is-disabled:active:not(.ds-action-icon-base--weight-x-light),
.ds-action-icon-base:disabled.ds-util-is-active:not(.ds-action-icon-base--weight-x-light),
.ds-action-icon-base.ds-util-is-disabled.ds-util-is-active:not(.ds-action-icon-base--weight-x-light) {
  background-color: rgba(0, 0, 0, 0.05);
}
.ds-action-icon-base--is-working:after {
  content: '';
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 100%;
  border: 2px solid currentColor;
  border-top-color: transparent !important;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  animation: loading 0.5s infinite linear;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ds-action-icon-base--is-working:before {
  display: none;
}
.ds-action-icon-base--has-only-icon {
  position: relative;
  justify-content: left;
  font-size: 0;
  text-indent: 5000px;
  white-space: nowrap;
  overflow: hidden;
}
.ds-action-icon-base--has-only-icon:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
}
.ds-action-icon-base:before {
  color: currentColor;
}
.ds-avatar-base {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: "ProximaNova", sans-serif;
  text-transform: uppercase;
  overflow: hidden;
}
.ds-avatar-base:before,
.ds-avatar-base:after {
  box-sizing: border-box;
}
.ds-avatar-base--size-s {
  font-size: 12px;
  line-height: 16px;
  width: 24px;
  height: 24px;
}
.ds-avatar-base--size-xs {
  font-size: 10px;
  line-height: 16px;
  width: 18px;
  height: 18px;
}
.ds-avatar-base--content-position-helper {
  padding-top: 1px;
}
.ds-choose-base {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.ds-choose-base:before,
.ds-choose-base:after {
  box-sizing: border-box;
}
.ds-choose-base .ds-choose-base {
  padding-left: 20px;
}
.ds-choose-base .ds-tip--hint {
  margin-left: 20px;
}
.ds-choose-base__label {
  position: relative;
  align-items: center;
  cursor: pointer;
}
.ds-choose-base__label:hover .ds-choose-base__helper {
  border-color: #b3b3b3;
}
.ds-choose-base__label:empty .ds-choose-base__helper {
  margin-top: 0;
}
.ds-choose-base__label.ds-label--style-chameleon:hover .ds-choose-base__helper {
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
}
.ds-choose-base__label.ds-label--style-chameleon .ds-choose-base__helper {
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
}
.ds-choose-base__helper {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  margin-right: 8px;
  border: 1px solid #cdcdcd;
  position: relative;
  flex-shrink: 0;
  background-color: #fff;
}
.ds-choose-base__helper:before,
.ds-choose-base__helper:after {
  box-sizing: border-box;
}
.ds-choose-base__helper:after {
  content: '';
  width: 4px;
  height: 4px;
  position: absolute;
  top: 3px;
  left: 3px;
}
.ds-choose-base__helper--no-child {
  margin: 0;
}
.ds-choose-base--text-monospace .ds-radio-button__label .ds-choose-base__helper {
  top: 0;
}
.ds-choose-base--is-disabled {
  pointer-events: none;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-choose-base--is-error .ds-choose-base__label:hover .ds-choose-base__helper {
  border-color: #ff3b30;
}
.ds-choose-base--is-error .ds-choose-base__label .ds-choose-base__helper {
  border-color: #ff3b30;
}
.ds-choose-base--stretched .ds-choose-base__label {
  width: 100%;
}
.ds-choose-base--switched-side .ds-choose-base__label .ds-choose-base__helper {
  margin-right: 0;
  order: 1;
}
.ds-choose-base--line-distributed .ds-choose-base__label {
  justify-content: space-between;
}
.ds-choose-base__input {
  display: none;
}
.ds-choose-base__input:checked + .ds-choose-base__label:hover .ds-choose-base__helper {
  background: #444;
}
.dark-version .ds-choose-base__input:checked + .ds-choose-base__label:hover .ds-choose-base__helper {
  background: #fff;
}
.ds-choose-base--is-error .ds-choose-base__input:checked + .ds-choose-base__label:hover .ds-choose-base__helper {
  border-color: #ff3b30;
}
.ds-choose-base--is-error .ds-choose-base__input:checked + .ds-choose-base__label .ds-choose-base__helper {
  border-color: #ff3b30;
  background: #ff3b30;
}
.ds-choose-base__input:checked + .ds-choose-base__label .ds-choose-base__helper {
  border-color: #444;
  background: #444;
}
.modal-box .ds-choose-base__input:checked + .ds-choose-base__label .ds-choose-base__helper {
  border-color: #444 !important;
  background: #444 !important;
}
.dark-version .ds-choose-base__input:checked + .ds-choose-base__label .ds-choose-base__helper {
  border-color: #fff;
  background: #fff;
}
.ds-avatar {
  flex-shrink: 0;
  color: #fff;
  font-weight: 600;
}
.ds-avatar--size-s.ds-avatar--has-border {
  padding: 2px;
}
.ds-avatar--size-xs.ds-avatar--has-border {
  padding: 1px;
}
.ds-avatar--has-default-bg {
  background-color: #111111;
}
.ds-avatar--has-text-dark {
  color: rgba(0, 0, 0, 0.8);
}
.ds-avatar__photo {
  display: flex;
}
.ds-avatar__photo--rounded {
  border-radius: 50%;
}
.ds-avatar-placeholder {
  background-color: rgba(0, 0, 0, 0.07);
  color: #5e5e5e;
}
.ds-avatar-placeholder--has-placeholder {
  position: relative;
  justify-content: left;
  font-size: 0;
  text-indent: 5000px;
  white-space: nowrap;
  overflow: hidden;
}
.ds-avatar-placeholder--has-placeholder:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
}
.ds-avatar-placeholder:before {
  color: inherit;
}
.ds-avatar-placeholder--size-s:before {
  font-size: 10px;
}
.ds-avatar-placeholder--size-xs:before {
  font-size: 8px;
}
.ds-badge {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  text-decoration: none;
  text-indent: 0;
  display: inline-flex;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  position: relative;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.ds-badge:before,
.ds-badge:after {
  box-sizing: border-box;
}
.ds-badge:before {
  position: static;
  color: inherit;
  vertical-align: middle;
  line-height: inherit;
  display: inline-block;
  font-size: 10px;
}
.ds-badge--type-text .ds-badge:before {
  margin-top: -1px;
  margin-right: 6px;
}
.ds-badge--type-text {
  padding-right: 6px;
  padding-left: 6px;
}
.ds-badge--type-icon {
  width: 18px;
  cursor: default;
}
.ds-badge--style-default {
  background-color: #7800ff;
  color: #fff;
}
.ds-badge--style-neutral {
  background-color: rgba(0, 0, 0, 0.06);
  color: #777777;
}
.ds-badge--style-warning {
  background-color: #ffe080;
  color: #444;
}
.ds-badge--size-s {
  font-size: 12px;
  line-height: 16px;
  height: 18px;
}
.ds-badge--size-xs {
  font-size: 10px;
  line-height: 16px;
  height: 14px;
  text-transform: uppercase;
}
.ds-badge--space-left-s {
  margin-left: 6px;
}
.ds-badge--space-right-s {
  margin-right: 6px;
}
.ds-badge--stretched {
  width: 100%;
}
.ds-badge--is-clickable {
  cursor: pointer;
}
.ds-badge--is-working {
  background-color: #e6e6e6;
  color: #e6e6e6;
  overflow: hidden;
}
.ds-badge--is-working:after {
  content: '';
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 100%;
  border: 1px solid #919191;
  border-top-color: transparent !important;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  animation: loading 0.5s infinite linear;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ds-badge--weight-light {
  border-width: 1px;
  border-style: solid;
  background-color: transparent;
}
.ds-badge--weight-light.ds-badge-style-default {
  border-color: #7800ff;
  color: #7800ff;
}
.ds-badge--weight-light.ds-badge--style-neutral {
  border-color: rgba(0, 0, 0, 0.1);
  color: #777777;
}
.ds-badge--weight-light.ds-badge--style-warning {
  border-color: #ffe080;
  color: #444;
}
.ds-badge--weight-light.ds-badge--is-working {
  border-color: #e6e6e6;
  color: transparent;
}
.ds-btn {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  height: 34px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-family: "ProximaNova", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  white-space: pre;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-btn:before,
.ds-btn:after {
  box-sizing: border-box;
}
.ds-btn:active,
.ds-btn:focus {
  outline: none;
}
.ds-btn[class*='icon-']:before {
  position: static;
  color: inherit;
  vertical-align: middle;
  line-height: inherit;
  margin-right: 6px;
}
.ds-btn--link-type {
  display: inline-flex;
}
.ds-btn--size-l {
  height: 50px;
  padding: 0 24px;
  font-size: 16px;
}
.ds-btn--size-s,
.ds-btn--size-xs {
  font-size: 12px;
}
.ds-btn--size-s[class*='icon-']:before,
.ds-btn--size-xs[class*='icon-']:before {
  margin-right: 5px;
}
.ds-btn--size-s {
  height: 24px;
  padding: 0 10px;
}
.ds-btn--size-xs {
  height: 18px;
  padding: 0 6px;
  font-weight: 400;
}
.ds-btn--stretched {
  display: flex;
  width: 100%;
}
.ds-btn--style-default {
  background-color: #444;
  box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0;
  color: #fff;
}
.ds-btn--style-default:hover,
.ds-btn--style-default:focus {
  background-color: #373737;
}
.ds-btn--style-default:active {
  background-color: #1e1e1e;
}
.ds-btn--style-neutral {
  background-color: rgba(0, 0, 0, 0.06);
  color: #5e5e5e;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 0 0;
}
.ds-btn--style-neutral:hover,
.ds-btn--style-neutral:focus {
  background-color: rgba(0, 0, 0, 0.09);
}
.ds-btn--style-neutral:active {
  background-color: rgba(0, 0, 0, 0.12);
}
.ds-btn--style-approve {
  background-color: #71c510;
  color: #fff;
}
.ds-btn--style-approve:hover,
.ds-btn--style-approve:focus {
  background-color: #63ad0e;
}
.ds-btn--style-approve:active {
  background-color: #3b6608;
}
.ds-btn--style-chameleon {
  background-color: rgba(255, 255, 255, 0.1);
  color: #f3f3f3;
}
.ds-btn--style-chameleon:hover,
.ds-btn--style-chameleon:focus {
  background-color: rgba(255, 255, 255, 0.13);
}
.ds-btn--style-chameleon:active {
  background-color: rgba(255, 255, 255, 0.15);
}
.ds-btn--style-destructive {
  background-color: #fb0d00;
  color: #fff;
}
.ds-btn--style-destructive:hover,
.ds-btn--style-destructive:focus {
  background-color: #e20c00;
}
.ds-btn--style-destructive:active {
  background-color: #af0900;
}
.ds-btn--style-warning {
  background-color: #ffe080;
  color: #444;
}
.ds-btn--style-warning:hover,
.ds-btn--style-warning:focus {
  background-color: #ffc61a;
}
.ds-btn--style-warning:active {
  background-color: #e6ad00;
}
.ds-btn--style-code {
  background-color: #2b2b2b !important;
  color: #fff;
}
.ds-btn--style-code:hover,
.ds-btn--style-code:focus {
  background-color: #1e1e1e;
}
.ds-btn--style-code:active {
  background-color: #111111;
}
.ds-btn--weight-light {
  font-weight: 400;
}
.ds-btn--weight-light.ds-btn--style-default {
  box-shadow: inset 0 0 0 1px #c999ff;
  background-color: transparent;
  color: #7800ff;
}
.ds-btn--weight-light.ds-btn--style-default:hover,
.ds-btn--weight-light.ds-btn--style-default:focus {
  background-color: rgba(247, 240, 255, 0.6);
}
.ds-btn--weight-light.ds-btn--style-default:active {
  background-color: #f7f0ff;
  color: #7800ff;
}
.ds-btn--weight-light.ds-btn--style-neutral {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  background-color: transparent;
  color: #5e5e5e;
}
.ds-btn--weight-light.ds-btn--style-neutral:hover,
.ds-btn--weight-light.ds-btn--style-neutral:focus {
  background-color: rgba(0, 0, 0, 0.05);
}
.ds-btn--weight-light.ds-btn--style-neutral:active {
  box-shadow: inset 0 0 0 1px #e6e6e6;
  background-color: rgba(0, 0, 0, 0.1);
}
.ds-btn--weight-light.ds-btn--style-approve {
  box-shadow: inset 0 0 0 1px #71c510;
  background-color: transparent;
  color: #56950c;
}
.ds-btn--weight-light.ds-btn--style-approve:hover,
.ds-btn--weight-light.ds-btn--style-approve:focus {
  background-color: #f0fde1;
}
.ds-btn--weight-light.ds-btn--style-approve:active {
  box-shadow: inset 0 0 0 1px #71c510;
  background-color: #71c510;
  color: #fff;
}
.ds-btn--weight-light.ds-btn--style-destructive {
  box-shadow: inset 0 0 0 1px #ff6b62;
  background-color: transparent;
  color: #fb0d00;
}
.ds-btn--weight-light.ds-btn--style-destructive:hover,
.ds-btn--weight-light.ds-btn--style-destructive:focus {
  background-color: #ffedec;
}
.ds-btn--weight-light.ds-btn--style-destructive:active {
  box-shadow: inset 0 0 0 1px #ff6b62;
  background-color: #ff6b62;
  color: #fff;
}
.ds-btn--weight-light.ds-btn--style-chameleon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  background-color: transparent;
  color: #fff;
}
.ds-btn--weight-light.ds-btn--style-chameleon:hover,
.ds-btn--weight-light.ds-btn--style-chameleon:focus {
  background-color: rgba(255, 255, 255, 0.2);
}
.ds-btn--weight-light.ds-btn--style-chameleon:active {
  box-shadow: inset 0 0 0 1px transparent;
  background-color: rgba(255, 255, 255, 0.5);
}
.ds-btn--weight-light.ds-btn--style-warning {
  box-shadow: inset 0 0 0 1px #b38600;
  background-color: transparent;
  color: #806000;
}
.ds-btn--weight-light.ds-btn--style-warning:hover,
.ds-btn--weight-light.ds-btn--style-warning:focus {
  background-color: #fff9e5;
}
.ds-btn--weight-light.ds-btn--style-warning:active {
  box-shadow: inset 0 0 0 1px #b38600;
  background-color: #b38600;
  color: #fff;
}
.ds-btn:disabled,
.ds-btn--is-disabled {
  pointer-events: none;
  opacity: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: none;
}
.ds-btn:disabled,
.ds-btn--is-disabled,
.ds-btn:disabled:hover,
.ds-btn--is-disabled:hover {
  background-color: #f3f3f3;
  color: #c0c0c0;
}
.ds-btn:disabled.ds-btn--weight-light,
.ds-btn--is-disabled.ds-btn--weight-light,
.ds-btn:disabled.ds-btn--weight-light:hover,
.ds-btn--is-disabled.ds-btn--weight-light:hover {
  box-shadow: inset 0 0 0 1px #e6e6e6;
  background-color: transparent;
  color: #a6a6a6;
}
.ds-btn:disabled.ds-btn--weight-light.ds-btn--style-chameleon,
.ds-btn--is-disabled.ds-btn--weight-light.ds-btn--style-chameleon,
.ds-btn:disabled.ds-btn--weight-light.ds-btn--style-chameleon:hover,
.ds-btn--is-disabled.ds-btn--weight-light.ds-btn--style-chameleon:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  background-color: transparent;
  color: rgba(255, 255, 255, 0.1);
}
.ds-btn--is-working {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.ds-btn--is-working:after {
  content: '';
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 100%;
  border: 2px solid #fff;
  border-top-color: transparent !important;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  animation: loading 0.5s infinite linear;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ds-btn--is-working[class*='icon-']:before {
  opacity: 0;
}
.ds-btn--is-working.ds-btn--size-l:after {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
}
.ds-btn--is-working.ds-btn--size-s:after {
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
}
.ds-btn--is-working.ds-btn--weight-light:after {
  border-color: #7800ff;
}
.ds-btn--is-working.ds-btn--weight-light.ds-btn--style-approve:after {
  border-color: #56950c;
}
.ds-btn--is-working.ds-btn--weight-light.ds-btn--style-destructive:after {
  border-color: #fb0d00;
}
.ds-btn--is-working.ds-btn--weight-light.ds-btn--style-chameleon:after {
  border-color: #fff;
}
.ds-btn--is-working.ds-btn--weight-light.ds-btn--style-warning:after {
  border-color: #806000;
}
.ds-btn--is-working.ds-btn--style-neutral:after,
.ds-btn--is-working.ds-btn--weight-light.ds-btn--style-neutral:after {
  border-color: #5e5e5e;
}
.ds-btn--is-working:disabled:after,
.ds-btn--is-working.ds-btn--weight-light:disabled:after,
.ds-btn--is-working.ds-btn--is-disabled:after,
.ds-btn--is-working.ds-btn--weight-light.ds-btn--is-disabled:after {
  border-color: #5e5e5e;
}
.ds-btn-group {
  display: flex;
}
.ds-btn-group--direction-horizontal {
  flex-direction: row;
  align-items: center;
}
.ds-btn-group--direction-horizontal.ds-btn-group--stretched {
  width: 100%;
}
.ds-btn-group--direction-vertical {
  flex-direction: column;
}
.ds-btn-group--direction-vertical.ds-btn-group--stretched {
  height: 100%;
}
.ds-btn-group--stretched {
  justify-content: space-between;
}
.ds-btn-group--space-horizontal-s {
  gap: 6px;
}
.ds-btn-group--space-horizontal-m {
  gap: 10px;
}
.ds-btn-group--space-horizontal-l {
  gap: 16px;
}
.ds-btn-group--space-vertical-s {
  gap: 6px;
}
.ds-btn-group--space-vertical-m {
  gap: 10px;
}
.ds-btn-group--space-vertical-l {
  gap: 16px;
}
.ds-btn-group__item {
  list-style: none;
}
.ds-btn-icon {
  text-decoration: none;
}
.ds-btn-icon--has-state-indicator {
  width: 46px;
}
.ds-btn-icon--has-state-indicator:before {
  margin-left: -12px;
}
.ds-btn-icon--has-state-indicator:after {
  content: '\E097';
  color: #919191;
  font-size: 7px;
  text-align: center;
  font-family: 'uxpds-icons';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 8px;
  text-indent: 0;
}
.ds-btn-icon--has-state-indicator.ds-btn-icon--size-s {
  width: 36px;
}
.ds-btn-icon--has-state-indicator.ds-btn-icon--size-s:after {
  right: 4px;
}
.ds-btn-icon--has-state-indicator.ds-btn-icon--size-xs {
  width: 30px;
}
.ds-btn-icon--has-state-indicator.ds-btn-icon--size-xs:after {
  right: 2px;
}
.ds-btn-icon--has-state-indicator:active:after,
.ds-btn-icon--has-state-indicator.ds-util-is-active:after {
  transform: rotate(180deg);
}
.ds-checkbox {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
}
.ds-checkbox:before,
.ds-checkbox:after {
  box-sizing: border-box;
}
.ds-checkbox:active,
.ds-checkbox:focus {
  outline: none;
}
.ds-checkbox .ds-choose-base__label .ds-choose-base__helper {
  border-radius: 4px;
  align-self: flex-start;
}
.ds-checkbox .ds-choose-base__input:checked + .ds-choose-base__label .ds-choose-base__helper:after {
  content: '\E311';
  color: #fff;
  font-size: 4px;
  text-align: center;
  font-family: 'uxpds-icons';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dark-version .ds-checkbox .ds-choose-base__input:checked + .ds-choose-base__label .ds-choose-base__helper:after {
  content: '\E311';
  color: #444;
  font-size: 4px;
  text-align: center;
  font-family: 'uxpds-icons';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.modal-box .ds-checkbox .ds-choose-base__input:checked + .ds-choose-base__label .ds-choose-base__helper:after {
  color: #fff !important;
}
.ds-decoration-icon {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: inline-flex;
}
.ds-decoration-icon:before,
.ds-decoration-icon:after {
  box-sizing: border-box;
}
.ds-decoration-icon:before {
  display: flex;
  align-items: center;
}
.ds-decoration-icon--has-placeholder {
  font-size: 0;
}
.ds-heading-separator {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  font-size: 14px;
  line-height: 21px;
  color: #5e5e5e;
  display: flex;
  width: 100%;
  align-items: center;
}
.ds-heading-separator:before,
.ds-heading-separator:after {
  box-sizing: border-box;
}
.ds-heading-separator--text-uppercase {
  font-size: 10px;
  color: #b3b3b3;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ds-heading-separator--text-center:after,
.ds-heading-separator--text-center:before {
  content: '';
  display: flex;
  height: 1px;
  background-color: #f3f3f3;
  flex-grow: 1;
}
.ds-heading-separator--text-on-left:after {
  content: '';
  display: flex;
  height: 1px;
  background-color: #f3f3f3;
  flex-grow: 1;
}
.ds-heading-separator--style-chameleon {
  color: #919191;
}
.ds-heading-separator--style-chameleon:after,
.ds-heading-separator--style-chameleon:before {
  background-color: rgba(255, 255, 255, 0.3);
}
.ds-heading-separator__text-helper--text-center {
  padding: 0 10px;
}
.ds-heading-separator__text-helper--text-on-left {
  padding-right: 10px;
}
.ds-hulk-select {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: block;
  width: 100%;
  position: relative;
}
.ds-hulk-select:before,
.ds-hulk-select:after {
  box-sizing: border-box;
}
.ds-hulk-select__header,
.ds-hulk-select__footer {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: block;
  margin: 0;
  padding: 6px 20px;
  color: #414141;
}
.ds-hulk-select__header:before,
.ds-hulk-select__footer:before,
.ds-hulk-select__header:after,
.ds-hulk-select__footer:after {
  box-sizing: border-box;
}
.ds-hulk-select__header:not(.ds-hulk-select__footer--inverted) {
  border-bottom: 1px solid #f3f3f3;
}
.ds-hulk-select__header--inverted {
  border-top: 1px solid #f3f3f3;
}
.ds-hulk-select__footer:not(.ds-hulk-select__footer--inverted) {
  border-top: 1px solid #f3f3f3;
}
.ds-hulk-select__footer--inverted {
  border-bottom: 1px solid #f3f3f3;
}
.ds-hulk-select .ds-hulk-select__input .ds-input__field {
  padding-right: 10px;
}
.ds-hulk-select__input {
  position: relative;
}
.ds-hulk-select__input-chevron {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.ds-hulk-select__input-chevron:before,
.ds-hulk-select__input-chevron:after {
  box-sizing: border-box;
}
.ds-hulk-select__input-chevron:before {
  content: '\E097';
  color: rgba(0, 0, 0, 0.4);
  font-size: 7px;
  text-align: center;
  font-family: 'uxpds-icons';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ds-hulk-select--style-chameleon .ds-hulk-select__input-chevron:before {
  color: rgba(255, 255, 255, 0.4);
}
.ds-util-is-disabled .ds-hulk-select__input-chevron {
  opacity: 0;
  visibility: hidden;
}
.ds-util-is-active .ds-hulk-select__input-chevron {
  transform: translateY(-50%) rotate(-180deg);
}
.ds-hulk-select__input-autosuggest {
  position: relative;
}
.ds-hulk-select__input-autosuggest-helper {
  width: 100%;
  padding-right: 10px;
  position: absolute;
  padding-block: 1px;
  top: 0;
  z-index: 1;
  color: #b3b3b3;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@supports (-moz-appearance:meterbar) {
  .ds-hulk-select__input-autosuggest-helper {
    top: 2px;
  }
}
.ds-hulk-select__input-autosuggest-helper .ds-util-is-hidden {
  color: transparent;
}
.ds-hulk-select__container {
  opacity: 0;
  visibility: hidden;
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: flex;
  border-radius: 8px;
  position: fixed;
  z-index: 2147483547;
  top: 0;
  left: 0;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}
.ds-hulk-select__container:before,
.ds-hulk-select__container:after {
  box-sizing: border-box;
}
.ds-hulk-select__container:active,
.ds-hulk-select__container:focus {
  outline: none;
}
.ds-hulk-select__container--visible {
  visibility: visible;
}
.ds-hulk-select__container--has-preview {
  padding-left: 170px;
}
.ds-hulk-select__container--searching {
  padding-top: 6px;
  padding-bottom: 6px;
}
.ds-hulk-select__container--searching .ds-hulk-select__group {
  padding: 0;
}
.ds-hulk-select__container--searching .ds-hulk-select__footer:not(.ds-hulk-select__footer--inverted) {
  padding-bottom: 0;
}
.ds-hulk-select__options {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: flex;
  position: relative;
  flex-direction: column;
  overflow-y: auto;
}
.ds-hulk-select__options:before,
.ds-hulk-select__options:after {
  box-sizing: border-box;
}
.ds-hulk-select__separator {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: flex;
  width: 100%;
  min-height: 1px;
  margin: 5px 0;
  border: none;
  position: relative;
  z-index: 1;
  align-items: center;
}
.ds-hulk-select__separator:before,
.ds-hulk-select__separator:after {
  box-sizing: border-box;
}
.ds-hulk-select__separator--empty {
  margin: 0;
}
.ds-hulk-select__separator-item {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 10px;
  color: #848484;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin: 0 auto;
  padding: 0 10px;
  background-color: #fff;
}
.ds-hulk-select__separator-item:before,
.ds-hulk-select__separator-item:after {
  box-sizing: border-box;
}
.ds-hulk-select__separator:before {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;
  transform: translateY(-1px);
  background-color: #f0f0f0;
}
.ds-hulk-select__group {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: block;
  width: calc(100% - 10px * 2);
  padding: 6px 0;
  margin-left: auto;
  margin-right: auto;
  cursor: default;
  list-style: none;
}
.ds-hulk-select__group:before,
.ds-hulk-select__group:after {
  box-sizing: border-box;
}
.ds-hulk-select__container--has-preview .ds-hulk-select__group {
  width: auto;
}
.ds-hulk-select__preview-container {
  overflow: hidden;
  display: flex;
  width: 170px;
  height: inherit;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
}
.ds-hulk-select__empty-state,
.ds-hulk-select__item {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 21px;
  color: #414141;
  display: flex;
  box-sizing: border-box;
  width: 100%;
}
.ds-hulk-select__empty-state:before,
.ds-hulk-select__item:before,
.ds-hulk-select__empty-state:after,
.ds-hulk-select__item:after {
  box-sizing: border-box;
}
.ds-hulk-select__empty-state {
  padding: 0 20px;
  color: #919191;
}
.ds-hulk-select__empty-state + .ds-hulk-select__group {
  display: none;
}
.ds-hulk-select__item {
  padding: 1px 10px 0 24px;
  border: 1px solid #fff;
  border-radius: 8px;
  position: relative;
  align-items: center;
  color: #414141;
}
.ds-hulk-select__item-single {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: block;
  width: 100%;
}
.ds-hulk-select__item-single:before,
.ds-hulk-select__item-single:after {
  box-sizing: border-box;
}
.ds-hulk-select__item--hidden {
  display: none;
}
.ds-hulk-select__item.ds-util-is-marked,
.ds-hulk-select__item--selected {
  z-index: 1;
}
.ds-hulk-select__item.ds-util-is-marked:not(.selected) {
  border-color: #f3f3f3;
  background-color: #f3f3f3;
}
.ds-hulk-select__item--selected {
  border-color: #f3f3f3;
}
.ds-hulk-select__item--selected:before {
  content: '\E311';
  color: #444;
  font-size: 5px;
  text-align: center;
  font-family: 'uxpds-icons';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: calc(50% - 5px / 2);
  left: 10px;
}
.ds-hulk-select__item-preview {
  display: none;
}
.ds-hulk-select__item-preview--is-visible {
  display: block;
}
.ds-hulk-select--fit-to-option .ds-hulk-select__container,
.ds-hulk-select--fit-to-option .ds-hulk-select__options,
.ds-hulk-select--fit-to-option .ds-hulk-select__item {
  width: auto;
}
.ds-hulk-select--weight-light .ds-hulk-select__input-chevron {
  right: 0 !important;
}
.ds-hulk-select--size-s {
  height: 24px;
}
.ds-hulk-select--size-s .ds-hulk-select__input-chevron {
  right: 6px;
}
.ds-hulk-select--size-m {
  height: 34px;
}
.ds-hulk-select--size-l {
  height: 50px;
}
.ds-hulk-select--size-l .ds-hulk-select__input-chevron {
  right: 20px;
}
.ds-hulk-select--width-xxs {
  width: 30px;
}
.ds-hulk-select--width-xs {
  width: 70px;
}
.ds-hulk-select--width-s {
  width: 150px;
}
.ds-hulk-select--width-m {
  width: 230px;
}
.ds-hulk-select--width-l {
  width: 310px;
}
.ds-hulk-select--width-xl {
  width: 310px;
}
.ds-inline-edit {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: block;
  max-width: 100%;
  text-decoration: inherit;
}
.ds-inline-edit:before,
.ds-inline-edit:after {
  box-sizing: border-box;
}
.ds-inline-edit--is-inline {
  display: inline;
}
.ds-inline-edit:focus,
.ds-inline-edit__field:focus,
.ds-inline-edit:active,
.ds-inline-edit__field:active {
  outline: none;
}
.ds-inline-edit__field {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-feature-settings: inherit;
  font-variant: inherit;
  line-height: inherit;
  text-decoration: inherit;
  text-transform: inherit;
  display: inline-block;
  max-width: 100%;
  margin-top: -0.25em;
  padding-top: 0.25em;
  vertical-align: top;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 50%, transparent 50%);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 2px 1px;
  cursor: default;
}
.ds-inline-edit__field:before,
.ds-inline-edit__field:after {
  box-sizing: border-box;
}
.ds-inline-edit__field:hover {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 50%, transparent 50%);
}
.ds-inline-edit__field--is-active,
.ds-inline-edit__field--is-active:focus,
.ds-inline-edit__field--is-active:active,
.ds-inline-edit__field--is-active:hover {
  background-image: none;
  text-overflow: initial;
  cursor: auto;
  -webkit-user-select: initial;
     -moz-user-select: initial;
          user-select: initial;
}
.ds-inline-edit__field--is-active:empty {
  display: inline-block;
  overflow: visible;
  overflow: initial;
}
.ds-inline-edit__field--is-active:empty:before {
  content: '';
  display: inline-block;
  min-width: 1px;
  height: 1px;
  overflow: hidden;
}
.ds-inline-edit__field--is-active:empty:after {
  display: none;
}
.ds-inline-edit__field--is-disabled {
  pointer-events: none;
}
.ds-inline-edit__field--is-disabled,
.ds-inline-edit__field--weight-x-light,
.ds-inline-edit__field--is-disabled:hover,
.ds-inline-edit__field--weight-x-light:hover {
  background-image: none;
}
.ds-inline-edit__field--style-chameleon {
  background-image: linear-gradient(to right, rgba(218, 218, 218, 0.3) 50%, transparent 50%);
}
.ds-inline-edit__field--style-chameleon:hover {
  background-image: linear-gradient(to right, rgba(230, 230, 230, 0.8) 50%, transparent 50%);
}
.ds-inline-edit__field--weight-light {
  background-image: none;
}
.ds-inline-edit__field--has-placeholder:empty:after {
  content: attr(data-placeholder);
}
.ds-inline-edit__field--has-text-cursor {
  cursor: text;
}
.ds-inline-edit__field--wrapped {
  display: inline;
  text-overflow: initial;
  white-space: normal;
  overflow: auto;
}
.ds-input20 {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: flex;
  flex-direction: row;
  color: #5e5e5e;
  font-family: "ProximaNova", sans-serif;
  font-size: 14px;
  cursor: text;
}
.ds-input20:before,
.ds-input20:after {
  box-sizing: border-box;
}
.ds-input20--weight-heavy {
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ds-input20--weight-light {
  border-radius: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.ds-input20--style-default {
  border-color: #e6e6e6;
  color: #5e5e5e;
}
.ds-util-is-active.ds-input20--style-default:not(.ds-input20--is-readonly),
.ds-input20--static:focus-within.ds-input20--style-default:not(.ds-input20--is-readonly) {
  border-color: #7800ff;
}
.ds-input20--style-chameleon {
  border-color: rgba(243, 243, 243, 0.3);
  background-color: transparent;
  color: #dadada;
}
.ds-input20--static:focus-within.ds-input20--style-chameleon:not(.ds-input20--is-readonly) {
  border-color: rgba(255, 255, 255, 0.5);
}
.ds-input20--style-chameleon .ds-input20__field::-moz-placeholder, .ds-input20__field--is-disabled .ds-input20--style-chameleon .ds-input20__field::-moz-placeholder {
  color: rgba(179, 179, 179, 0.4);
}
.ds-input20--style-chameleon .ds-input20__field::placeholder,
.ds-input20__field--is-disabled .ds-input20--style-chameleon .ds-input20__field::placeholder {
  color: rgba(179, 179, 179, 0.4);
}
.ds-input20--style-error {
  border-color: #ff3b30;
  color: #ff3b30;
}
.ds-input20--style-transparent {
  background-color: transparent;
}
.ds-input20--size-s {
  height: 24px;
  line-height: 16px;
}
.ds-input20--weight-heavy.ds-input20--size-s .ds-input20__field {
  padding-top: 3px;
  padding-bottom: 3px;
}
:not(.ds-input20--has-end-element).ds-input20--weight-heavy.ds-input20--size-s .ds-input20__field,
.ds-input20--is-end-element-on-focus:not(.ds-util-is-active).ds-input20--weight-heavy.ds-input20--size-s .ds-input20__field,
.ds-input20--is-end-element-on-focus.ds-input20--static:not(:focus-within).ds-input20--weight-heavy.ds-input20--size-s .ds-input20__field {
  padding-right: 6px;
}
:not(.ds-input20--has-start-element).ds-input20--weight-heavy.ds-input20--size-s .ds-input20__field,
.ds-input20--is-start-element-on-focus:not(.ds-util-is-active).ds-input20--weight-heavy.ds-input20--size-s .ds-input20__field,
.ds-input20--is-start-element-on-focus.ds-input20--static:not(:focus-within).ds-input20--weight-heavy.ds-input20--size-s .ds-input20__field {
  padding-left: 6px;
}
.ds-input20--size-m {
  height: 34px;
  line-height: 21px;
}
:not(.ds-input20--has-end-element).ds-input20--weight-heavy.ds-input20--size-m .ds-input20__field,
.ds-input20--is-end-element-on-focus:not(.ds-util-is-active).ds-input20--weight-heavy.ds-input20--size-m .ds-input20__field,
.ds-input20--is-end-element-on-focus.ds-input20--static:not(:focus-within).ds-input20--weight-heavy.ds-input20--size-m .ds-input20__field {
  padding-right: 10px;
}
:not(.ds-input20--has-start-element).ds-input20--weight-heavy.ds-input20--size-m .ds-input20__field,
.ds-input20--is-start-element-on-focus:not(.ds-util-is-active).ds-input20--weight-heavy.ds-input20--size-m .ds-input20__field,
.ds-input20--is-start-element-on-focus.ds-input20--static:not(:focus-within).ds-input20--weight-heavy.ds-input20--size-m .ds-input20__field {
  padding-left: 10px;
}
.ds-input20--size-l {
  height: 50px;
  font-size: 16px;
  line-height: 24px;
}
.ds-input20--weight-heavy.ds-input20--size-l .ds-input20__field {
  padding-top: 12px;
  padding-bottom: 12px;
}
:not(.ds-input20--has-end-element).ds-input20--weight-heavy.ds-input20--size-l .ds-input20__field,
.ds-input20--is-end-element-on-focus:not(.ds-util-is-active).ds-input20--weight-heavy.ds-input20--size-l .ds-input20__field,
.ds-input20--is-start-element-on-focus.ds-input20--static:not(:focus-within).ds-input20--weight-heavy.ds-input20--size-l .ds-input20__field {
  padding-right: 20px;
}
:not(.ds-input20--has-start-element).ds-input20--weight-heavy.ds-input20--size-l .ds-input20__field,
.ds-input20--is-start-element-on-focus:not(.ds-util-is-active).ds-input20--weight-heavy.ds-input20--size-l .ds-input20__field,
.ds-input20--is-end-element-on-focus.ds-input20--static:not(:focus-within).ds-input20--weight-heavy.ds-input20--size-l .ds-input20__field {
  padding-left: 20px;
}
.ds-input20--size-l .ds-input20__field.ds-input20__field--text-monospace {
  font-size: 15px;
}
.ds-input20--width-xxs {
  width: 30px;
}
.ds-input20--width-xs {
  width: 70px;
}
.ds-input20--width-s {
  width: 150px;
}
.ds-input20--width-m {
  width: 230px;
}
.ds-input20--width-l {
  width: 310px;
}
.ds-input20--width-xl {
  width: 310px;
}
.ds-input20--width-stretched {
  width: 100%;
}
.ds-input20--is-readonly {
  border-color: #f6f6f6;
  box-shadow: none;
}
.ds-input20--is-readonly.ds-input20--weight-heavy {
  background-color: #f6f6f6;
}
.ds-input20--is-readonly.ds-input20--style-chameleon {
  border-color: transparent;
}
.ds-input20--is-readonly.ds-input20--style-chameleon.ds-input20--weight-heavy {
  background-color: rgba(243, 243, 243, 0.1);
}
.ds-input20--is-disabled {
  pointer-events: none;
  opacity: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #5e5e5e;
  -webkit-text-fill-color: #5e5e5e;
  border-color: transparent !important;
  box-shadow: none;
}
.ds-input20__field {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
}
.ds-input20__field:before,
.ds-input20__field:after {
  box-sizing: border-box;
}
.ds-input20__field:active,
.ds-input20__field:focus {
  outline: none;
}
.ds-input20__field::-webkit-inner-spin-button,
.ds-input20__field::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}
.ds-input20__field--is-inactive.ds-input20__field::-moz-selection {
  color: inherit;
  background-color: transparent;
}
.ds-input20__field--is-inactive.ds-input20__field::selection {
  color: inherit;
  background-color: transparent;
}
:not(.ds-input20__field--is-inactive).ds-input20__field::-moz-selection {
  color: #fff;
  background-color: #7800ff;
}
:not(.ds-input20__field--is-inactive).ds-input20__field::selection {
  color: #fff;
  background-color: #7800ff;
}
.ds-input20__field::-moz-placeholder, .ds-input20__field--is-disabled .ds-input20__field::-moz-placeholder {
  color: #b3b3b3;
}
.ds-input20__field::placeholder,
.ds-input20__field--is-disabled .ds-input20__field::placeholder {
  color: #b3b3b3;
}
.ds-input20__field--text-ellipsis {
  text-overflow: ellipsis;
}
.ds-input20__field--text-monospace {
  font-size: 13px;
  font-family: "SourceCodePro", "Courier New", Courier, monospace;
}
.ds-input20__field--text-uppercase {
  text-transform: uppercase;
}
.ds-input20__field--text-center {
  text-align: center;
}
.ds-input20__field--text-on-right {
  text-align: right;
}
.ds-input20__extra-element {
  display: flex;
  height: 100%;
  flex-grow: 0;
  align-items: center;
  flex-shrink: 0;
  line-height: inherit;
}
.ds-input20--size-s .ds-input20__extra-element--end-element {
  padding-left: 3px;
}
.ds-input20--weight-heavy.ds-input20--size-s .ds-input20__extra-element--end-element {
  padding-right: 6px;
}
.ds-input20--size-m .ds-input20__extra-element--end-element {
  padding-left: 5px;
}
.ds-input20--weight-heavy.ds-input20--size-m .ds-input20__extra-element--end-element {
  padding-right: 10px;
}
.ds-input20--size-l .ds-input20__extra-element--end-element {
  padding-left: 10px;
}
.ds-input20--weight-heavy.ds-input20--size-l .ds-input20__extra-element--end-element {
  padding-right: 20px;
}
.ds-input20__extra-element--end-element:not(:empty):before {
  order: 9999;
}
.ds-input20--size-s .ds-input20__extra-element--end-element:not(:empty):before {
  margin-left: 3px;
}
.ds-input20--size-m .ds-input20__extra-element--end-element:not(:empty):before {
  margin-left: 5px;
}
.ds-input20--size-l .ds-input20__extra-element--end-element:not(:empty):before {
  margin-left: 10px;
}
.ds-input20--size-s .ds-input20__extra-element--start-element {
  padding-right: 3px;
}
.ds-input20--weight-heavy.ds-input20--size-s .ds-input20__extra-element--start-element {
  padding-left: 6px;
}
.ds-input20--size-m .ds-input20__extra-element--start-element {
  padding-right: 5px;
}
.ds-input20--weight-heavy.ds-input20--size-m .ds-input20__extra-element--start-element {
  padding-left: 10px;
}
.ds-input20--size-l .ds-input20__extra-element--start-element {
  padding-right: 10px;
}
.ds-input20--weight-heavy.ds-input20--size-l .ds-input20__extra-element--start-element {
  padding-left: 20px;
}
.ds-input20--size-s .ds-input20__extra-element--start-element:not(:empty):before {
  margin-right: 3px;
}
.ds-input20--size-m .ds-input20__extra-element--start-element:not(:empty):before {
  margin-right: 5px;
}
.ds-input20--size-l .ds-input20__extra-element--start-element:not(:empty):before {
  margin-right: 10px;
}
.ds-input20--static:not(:focus-within) .ds-input20__extra-element--is-visible-on-focus,
.ds-input20:not(.ds-util-is-active) .ds-input20__extra-element--is-visible-on-focus {
  display: none;
}
.ds-input {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
}
.ds-input:before,
.ds-input:after {
  box-sizing: border-box;
}
.ds-input.with-icon-on-left,
.ds-input.with-icon-on-right {
  position: relative;
}
.ds-input .ds-input__field {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100%;
  height: 34px;
  padding-right: 10px;
  padding-left: 10px;
  border-color: #e6e6e6;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #5e5e5e;
  font-family: "ProximaNova", sans-serif;
  font-size: 14px;
  line-height: 21px;
  cursor: text;
}
.ds-input .ds-input__field:before,
.ds-input .ds-input__field:after {
  box-sizing: border-box;
}
.ds-input .ds-input__field:active,
.ds-input .ds-input__field:focus {
  outline: none;
}
.with-icon-on-left.ds-input .ds-input__field {
  padding-left: 30px !important;
}
.ds-icon--size-s.with-icon-on-left.ds-input .ds-input__field {
  padding-left: 20px !important;
}
.ds-icon--size-xs.with-icon-on-left.ds-input .ds-input__field {
  padding-left: 17px !important;
}
.with-icon-on-right.ds-input .ds-input__field {
  padding-right: 30px !important;
}
.ds-icon--size-s.with-icon-on-right.ds-input .ds-input__field {
  padding-right: 20px !important;
}
.ds-icon--size-xs.with-icon-on-right.ds-input .ds-input__field {
  padding-right: 17px !important;
}
.ds-input .ds-input__field::-moz-placeholder {
  color: #b3b3b3;
}
.ds-input .ds-input__field::placeholder {
  color: #b3b3b3;
}
.ds-input .ds-input__field::-moz-selection {
  background-color: #7800ff;
  color: #fff;
}
.ds-input .ds-input__field::selection {
  background-color: #7800ff;
  color: #fff;
}
.ds-input .ds-input__field:active:not(.ds-input__field--is-readonly),
.ds-input .ds-input__field:focus:not(.ds-input__field--is-readonly) {
  border-color: #7800ff;
}
.ds-input .ds-input__field:disabled {
  pointer-events: none;
  opacity: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #5e5e5e;
  -webkit-text-fill-color: #5e5e5e;
  border-color: transparent !important;
  box-shadow: none;
}
.ds-input .ds-input__field::-webkit-inner-spin-button,
.ds-input .ds-input__field::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}
.ds-input .ds-input__field--is-readonly {
  border-color: #f6f6f6;
  background-color: #f6f6f6;
  box-shadow: none;
}
.ds-input .ds-input__field--is-readonly.ds-input__field--style-chameleon {
  border-color: transparent;
  background-color: rgba(243, 243, 243, 0.1);
}
.ds-input .ds-input__field--hasBtnIconIndent {
  padding-left: 40px;
}
.ds-input .ds-input__field--hasBtnIconRightIndent {
  padding-right: 40px;
}
.ds-input .ds-input__field--size-s {
  height: 24px;
  padding: 3px 6px;
  line-height: 16px;
}
.ds-input .ds-input__field--size-s.ds-input__field--text-monospace {
  font-family: "SourceCodePro", "Courier New", Courier, monospace;
  font-size: 11px;
  line-height: 16px;
}
.ds-input .ds-input__field--size-s.ds-input__field--hasBtnIconIndent {
  padding-left: 30px;
}
.ds-input .ds-input__field--size-s.ds-input__field--hasBtnIconRightIndent {
  padding-right: 30px;
}
.ds-input .ds-input__field--size-l {
  height: 50px;
  padding: 12px 20px;
  font-size: 16px;
  line-height: 24px;
}
.ds-input .ds-input__field--size-l.ds-input__field--hasBtnIconIndent {
  padding-left: 44px;
}
.ds-input .ds-input__field--size-l.ds-input__field--hasBtnIconRightIndent {
  padding-right: 44px;
}
.ds-input .ds-input__field--style-chameleon {
  border-color: rgba(243, 243, 243, 0.3);
  background: transparent;
  color: #dadada;
}
.ds-input .ds-input__field--style-chameleon::-moz-placeholder {
  color: rgba(179, 179, 179, 0.4);
}
.ds-input .ds-input__field--style-chameleon::placeholder {
  color: rgba(179, 179, 179, 0.4);
}
.ds-input .ds-input__field--style-chameleon:active:not(.ds-input__field--is-readonly),
.ds-input .ds-input__field--style-chameleon:focus:not(.ds-input__field--is-readonly) {
  border-color: rgba(255, 255, 255, 0.5);
}
.ds-input .ds-input__field--style-transparent {
  background: transparent;
}
.ds-input .ds-input__field--weight-light {
  padding: 0;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ds-input .ds-input__field--weight-light.size-l {
  padding-right: 0;
  padding-left: 0;
}
.with-icon-on-left.ds-input .ds-input__field--weight-light {
  padding-left: 20px !important;
}
.ds-icon--size-s.with-icon-on-left.ds-input .ds-input__field--weight-light {
  padding-left: 10px !important;
}
.ds-icon--size-xs.with-icon-on-left.ds-input .ds-input__field--weight-light {
  padding-left: 7px !important;
}
.with-icon-on-right.ds-input .ds-input__field--weight-light {
  padding-right: 20px !important;
}
.ds-icon--size-s.with-icon-on-right.ds-input .ds-input__field--weight-light {
  padding-right: 10px !important;
}
.ds-icon--size-xs.with-icon-on-right.ds-input .ds-input__field--weight-light {
  padding-right: 7px !important;
}
.ds-input .ds-input__field--text-on-right {
  text-align: right;
}
.ds-input .ds-input__field--text-center {
  text-align: center;
}
.ds-input .ds-input__field--text-uppercase {
  text-transform: uppercase;
}
.ds-input .ds-input__field--text-monospace {
  font-family: "SourceCodePro", "Courier New", Courier, monospace;
}
.ds-input .ds-input__field--is-error {
  border-color: #ff3b30;
  color: #ff3b30;
}
.ds-input .ds-input__field--is-inactive {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-input .ds-input__field--is-ellipsis {
  text-overflow: ellipsis;
}
.ds-input--width-xs {
  width: 70px;
}
.ds-input--width-s {
  width: 150px;
}
.ds-input--width-m {
  width: 230px;
}
.ds-input--width-l {
  width: 310px;
}
.ds-input--width-xl {
  width: 310px;
}
.ds-input--width-stretched {
  width: 100%;
}
.ds-input-copy {
  position: relative;
}
.ds-input-copy--width-xxs {
  width: 30px;
}
.ds-input-copy--width-xs {
  width: 70px;
}
.ds-input-copy--width-s {
  width: 150px;
}
.ds-input-copy--width-m {
  width: 230px;
}
.ds-input-copy--width-l {
  width: 310px;
}
.ds-input-copy--width-xl {
  width: 310px;
}
.ds-input-copy__copiedInfo {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  transform: translateY(-50%);
}
.ds-input-copy__copyField {
  position: relative;
  z-index: 1;
}
.ds-input-copy__copyBtn {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  transform: translateY(-50%);
}
.ds-item-list__item-wrapper {
  display: grid;
  grid-template-areas: "option removeBtn";
  grid-template-columns: 1fr max-content;
}
.ds-item-list__item-name {
  grid-area: option;
}
.ds-item-list__remove-btn {
  margin: -2px -7px -1px 0;
  grid-area: removeBtn;
}
.ds-item-list__new-item-field {
  margin-top: 6px;
}
.ds-item-list__enter-icon:before {
  color: #c0c0c0;
}
.ds-label {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  font-family: "ProximaNova", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #6a6a6a;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  text-decoration: none;
  text-indent: 0;
  display: flex !important;
}
.ds-label:before,
.ds-label:after {
  box-sizing: border-box;
}
.ds-label--text-monospace {
  font-family: "SourceCodePro", "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 21px;
  color: #5e5e5e;
}
.ds-label--has-inherit-style {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-feature-settings: inherit;
  font-variant: inherit;
  line-height: inherit;
  text-decoration: inherit;
  text-transform: inherit;
}
.ds-label--style-chameleon {
  color: #dadada;
}
.ds-link {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: inline;
  max-width: 100%;
  color: #7800ff;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}
.ds-link:before,
.ds-link:after {
  box-sizing: border-box;
}
.ds-link:active .ds-link__text {
  box-shadow: none !important;
}
.ds-link[class*='ds-icon']:before {
  position: static;
  color: inherit;
  vertical-align: middle;
  line-height: inherit;
  display: inline-block;
  margin-top: -2px;
  margin-right: 6px;
}
.ds-link:not(.ds-link--inverted-style):not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 rgba(120, 0, 255, 0.3);
}
.ds-link--style-contextual.ds-link:not(.ds-link--inverted-style):not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 currentColor;
}
.ds-link--style-chameleon.ds-link:not(.ds-link--inverted-style):not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 rgba(230, 230, 230, 0.3);
}
.ds-link--style-neutral.ds-link:not(.ds-link--inverted-style):not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 rgba(94, 94, 94, 0.3);
}
.ds-link--style-destructive.ds-link:not(.ds-link--inverted-style):not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 rgba(251, 13, 0, 0.3);
}
:hover.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text,
.ds-util-is-marked.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 rgba(120, 0, 255, 0.5);
}
:hover.ds-link--style-contextual.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text,
.ds-util-is-marked.ds-link--style-contextual.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 currentColor;
}
:hover.ds-link--style-chameleon.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text,
.ds-util-is-marked.ds-link--style-chameleon.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 rgba(230, 230, 230, 0.5);
}
:hover.ds-link--style-neutral.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text,
.ds-util-is-marked.ds-link--style-neutral.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 rgba(71, 71, 71, 0.5);
}
:hover.ds-link--style-destructive.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text,
.ds-util-is-marked.ds-link--style-destructive.ds-link:not(.ds-util-is-working):not(.ds-util-is-disabled) .ds-link__text {
  box-shadow: inset 0 -1px 0 0 rgba(201, 11, 0, 0.5);
}
.ds-link--ellipsis-style {
  display: inline-flex;
  align-items: center;
}
.ds-link--style-contextual,
.ds-link--style-contextual:hover,
.ds-link--style-contextual.ds-util-is-marked {
  color: inherit;
}
.ds-link--style-chameleon {
  color: #fff;
}
.ds-link--style-chameleon:hover,
.ds-link--style-chameleon.ds-util-is-marked {
  color: rgba(255, 255, 255, 0.8);
}
.ds-link--style-neutral {
  color: #5e5e5e;
}
.ds-link--style-neutral:hover,
.ds-link--style-neutral.ds-util-is-marked {
  color: #474747;
}
.ds-link--style-destructive {
  color: #fb0d00;
}
.ds-link--style-destructive:hover,
.ds-link--style-destructive.ds-util-is-marked {
  color: #c90b00;
}
.ds-link.ds-util-is-disabled {
  color: #c0c0c0;
  pointer-events: none;
}
.ds-link.ds-util-is-disabled.ds-link--style-chameleon {
  color: rgba(255, 255, 255, 0.1);
}
.ds-link.ds-util-is-disabled.ds-link--style-contextual {
  opacity: 0.5;
  color: inherit;
}
.ds-link.ds-util-is-working {
  display: inline-block;
  position: relative;
  color: transparent;
  pointer-events: none;
}
.ds-link.ds-util-is-working:after {
  content: '';
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 100%;
  border: 2px solid #7800ff;
  border-top-color: transparent !important;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  animation: loading 0.5s infinite linear;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ds-link.ds-util-is-working[class*='ds-icon']:before {
  opacity: 0;
}
.ds-link.ds-util-is-working.ds-link--style-chameleon:after {
  border-color: #fff;
}
.ds-link.ds-util-is-working.ds-link--style-neutral:after {
  border-color: #5e5e5e;
}
.ds-link.ds-util-is-working.ds-link--style-destructive:after {
  border-color: #fb0d00;
}
.ds-link__ellipsis-helper {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
}
.ds-link__ellipsis-helper:before,
.ds-link__ellipsis-helper:after {
  box-sizing: border-box;
}
.ds-link__ellipsis-helper .ds-link__text {
  line-height: 100%;
}
.ds-link__text {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: inline;
  vertical-align: top;
}
.ds-link__text:before,
.ds-link__text:after {
  box-sizing: border-box;
}
.ds-radio-button {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
}
.ds-radio-button:before,
.ds-radio-button:after {
  box-sizing: border-box;
}
.ds-radio-button:active,
.ds-radio-button:focus {
  outline: none;
}
.ds-radio-button .ds-choose-base__label .ds-choose-base__helper {
  border-radius: 50%;
  align-self: flex-start;
}
.ds-radio-button .ds-choose-base__input:checked + .ds-choose-base__label .ds-choose-base__helper:after {
  border-radius: 50%;
  background-color: #fff;
}
.ds-radio-group {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
}
.ds-radio-group:before,
.ds-radio-group:after {
  box-sizing: border-box;
}
.ds-radio-group__item {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  list-style: none;
}
.ds-radio-group__item:before,
.ds-radio-group__item:after {
  box-sizing: border-box;
}
.ds-switcher {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  line-height: 21px;
  color: #5e5e5e;
  font-family: "ProximaNova", sans-serif;
  font-size: 14px;
}
.ds-switcher:before,
.ds-switcher:after {
  box-sizing: border-box;
}
.ds-switcher--stretched {
  width: 100%;
}
.ds-switcher--size-s {
  height: 24px;
}
.ds-switcher--size-s .ds-switcher__label {
  padding: 0 10px;
}
.ds-switcher--size-m {
  height: 34px;
}
.ds-switcher--size-m .ds-switcher__label {
  padding: 0 16px;
}
.ds-switcher--is-disabled {
  opacity: 0.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  cursor: default;
}
.ds-switcher__input {
  display: none;
}
.ds-switcher__input:checked ~ .ds-switcher__options-wrapper [attr-option="checked"] {
  pointer-events: none;
  background-color: #f0f0f0;
  cursor: default;
}
.ds-switcher__input:not(:checked) ~ .ds-switcher__options-wrapper [attr-option="unchecked"] {
  pointer-events: none;
  background-color: #f0f0f0;
  cursor: default;
}
.ds-switcher__options-wrapper {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 8px;
  border: 1px solid #e6e6e6;
}
.ds-switcher__option {
  list-style: none;
}
.ds-switcher__option--is-active {
  pointer-events: none;
  background-color: #f0f0f0;
  cursor: default;
}
.ds-switcher__option--has-separator {
  border-left: 1px solid #e6e6e6;
}
.ds-switcher__label {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ds-switcher__label::before {
  margin-right: 6px;
}
.ds-textarea {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: block;
  width: 100%;
  padding: 5.5px 10px;
  border-color: #e6e6e6;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #5e5e5e;
  font-family: "ProximaNova", sans-serif;
  font-size: 14px;
  line-height: 21px;
  cursor: text;
  resize: none;
}
.ds-textarea:before,
.ds-textarea:after {
  box-sizing: border-box;
}
.ds-textarea:active,
.ds-textarea:focus {
  outline: none;
}
.ds-textarea.ds-util-is-disabled {
  pointer-events: none;
  opacity: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #5e5e5e;
  -webkit-text-fill-color: #5e5e5e;
}
.ds-textarea::-moz-selection {
  background-color: #7800ff;
  color: #fff;
}
.ds-textarea::selection {
  background-color: #7800ff;
  color: #fff;
}
.ds-textarea::-moz-placeholder {
  color: #b3b3b3;
}
.ds-textarea::placeholder {
  color: #b3b3b3;
}
.ds-textarea:active:not([readonly]),
.ds-textarea:focus:not([readonly]) {
  border-color: #7800ff;
}
.ds-textarea[readonly] {
  border-color: #f6f6f6;
  background-color: #f6f6f6;
  box-shadow: none;
}
.ds-textarea--is-error {
  border-color: #ff3b30;
  color: #ff3b30;
}
.ds-textarea--style-chameleon {
  border-color: rgba(243, 243, 243, 0.3);
  background: transparent;
  color: #dadada;
}
.ds-textarea--style-chameleon::-moz-placeholder {
  color: rgba(179, 179, 179, 0.4);
}
.ds-textarea--style-chameleon::placeholder {
  color: rgba(179, 179, 179, 0.4);
}
.ds-textarea--style-chameleon:active,
.ds-textarea--style-chameleon:focus {
  border-color: rgba(255, 255, 255, 0.5);
}
.ds-textarea--style-transparent {
  background: transparent;
}
.ds-textarea--size-s {
  padding: 3px 6px;
  line-height: 16px;
}
.ds-textarea--size-s.ds-textarea--text-monospace {
  font-family: "SourceCodePro", "Courier New", Courier, monospace;
  font-size: 11px;
  line-height: 16px;
}
.ds-textarea--size-l {
  padding: 12px 20px;
  font-size: 16px;
  line-height: 24px;
}
.ds-textarea--width-xxs {
  width: 30px;
}
.ds-textarea--width-xs {
  width: 70px;
}
.ds-textarea--width-s {
  width: 150px;
}
.ds-textarea--width-m {
  width: 230px;
}
.ds-textarea--width-l {
  width: 310px;
}
.ds-textarea--width-xl {
  width: 310px;
}
.ds-textarea--text-monospace {
  font-family: "SourceCodePro", "Courier New", Courier, monospace;
}
.ds-textarea--text-uppercase {
  text-transform: uppercase;
}
.ds-textarea--weight-light {
  border-radius: 8px;
  box-shadow: none;
}
.ds-tip {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  font-family: "ProximaNova", sans-serif;
  font-size: 12px;
  line-height: 16px;
  display: block;
  color: #848484;
}
.ds-tip:before,
.ds-tip:after {
  box-sizing: border-box;
}
.ds-tip--style-chameleon {
  color: #b3b3b3;
}
.ds-tip--style-error {
  color: #ff3b30;
}
.ds-tip--size-xs {
  font-size: 10px;
  line-height: 16px;
}
.ds-tooltip {
  --tooltipOffset: 10px;
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: "ProximaNova", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  text-decoration: none;
  text-indent: 0;
  opacity: 0;
  visibility: hidden;
  display: block;
  min-height: 24px;
  padding: 5px 10px 3px;
  border-radius: 8px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  background: rgba(4, 4, 4, 0.9);
  color: #b3b3b3;
  white-space: nowrap;
  pointer-events: none;
}
.ds-tooltip:before,
.ds-tooltip:after {
  box-sizing: border-box;
}
[attr-show-node="ds-tooltip"]:hover .ds-tooltip {
  opacity: 1;
  visibility: visible;
}
[attr-show-node="ds-tooltip"]:hover .ds-tooltip--delayed {
  transition-delay: 200ms;
}
.ds-tooltip__arrow {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  height: 6px;
  position: fixed;
  border: 3px solid transparent;
}
.ds-tooltip__arrow:before,
.ds-tooltip__arrow:after {
  box-sizing: border-box;
}
.ds-tooltip--visible {
  opacity: 1;
  visibility: visible;
}
.ds-tooltip--is-clickable {
  pointer-events: auto;
}
.ds-tooltip--is-clickable:before {
  content: '';
  display: block;
  position: absolute;
}
.ds-tooltip--is-clickable-top:before,
.ds-tooltip--is-clickable-bottom:before {
  height: calc(var(--tooltipOffset) + 5px);
  right: 0;
  left: 0;
}
.ds-tooltip--is-clickable-top:before {
  bottom: calc((var(--tooltipOffset) + 5px) * -1);
}
.ds-tooltip--is-clickable-bottom:before {
  top: calc((var(--tooltipOffset) + 5px) * -1);
}
.ds-tooltip--is-clickable-right:before,
.ds-tooltip--is-clickable-left:before {
  width: calc(var(--tooltipOffset) + 5px);
  top: 0;
  bottom: 0;
}
.ds-tooltip--is-clickable-right:before {
  left: calc((var(--tooltipOffset) + 5px) * -1);
}
.ds-tooltip--is-clickable-left:before {
  right: calc((var(--tooltipOffset) + 5px) * -1);
}
.ds-tooltip--bottom,
.ds-tooltip--top {
  left: 50%;
  transform: translateX(-50%);
}
.ds-tooltip--bottom .ds-tooltip__arrow,
.ds-tooltip--top .ds-tooltip__arrow {
  left: 50%;
  transform: translateX(-50%);
}
.ds-tooltip--top {
  top: -10px;
  transform: translateX(-50%) translateY(-100%);
}
.ds-tooltip--top .ds-tooltip__arrow {
  border-top-color: rgba(4, 4, 4, 0.9);
  bottom: -6px;
}
.ds-tooltip--bottom {
  top: calc(100% + 10px);
}
.ds-tooltip--bottom .ds-tooltip__arrow {
  border-bottom-color: rgba(4, 4, 4, 0.9);
  top: -6px;
}
.ds-tooltip--right,
.ds-tooltip--left {
  top: 50%;
}
.ds-tooltip--right .ds-tooltip__arrow,
.ds-tooltip--left .ds-tooltip__arrow {
  top: 50%;
  transform: translateY(-50%);
}
.ds-tooltip--right {
  left: calc(100% + 10px);
  transform: translateY(-50%);
}
.ds-tooltip--right .ds-tooltip__arrow {
  border-right-color: rgba(4, 4, 4, 0.9);
  left: -6px;
}
.ds-tooltip--left {
  left: -10px;
  transform: translateX(-100%) translateY(-50%);
}
.ds-tooltip--left .ds-tooltip__arrow {
  border-left-color: rgba(4, 4, 4, 0.9);
  right: -6px;
}
.ds-fieldset {
  display: grid;
}
.ds-fieldset--direction-vertical {
  grid-template-areas: "label" "fields" "tip";
  grid-template-rows: max-content max-content max-content;
}
.ds-fieldset--direction-horizontal {
  -moz-column-gap: 6px;
       column-gap: 6px;
  grid-template-areas: "label fields" "label tip";
  grid-template-columns: max-content 1fr;
  grid-template-rows: max-content max-content;
}
.ds-fieldset--width-xxs {
  width: 30px;
}
.ds-fieldset--width-xs {
  width: 70px;
}
.ds-fieldset--width-s {
  width: 150px;
}
.ds-fieldset--width-m {
  width: 230px;
}
.ds-fieldset--width-l {
  width: 310px;
}
.ds-fieldset--width-xl {
  width: 310px;
}
.ds-fieldset--width-stretched {
  width: 100%;
}
.ds-fieldset__label {
  margin-bottom: 1px;
  grid-area: label;
}
.ds-fieldset__fields {
  display: flex;
  grid-area: fields;
}
.ds-fieldset__fields--direction-vertical {
  flex-direction: column;
}
.ds-fieldset__fields--direction-horizontal {
  flex-direction: row;
}
.ds-fieldset__fields--space-horizontal-s {
  gap: 6px;
}
.ds-fieldset__fields--space-horizontal-m {
  gap: 10px;
}
.ds-fieldset__fields--space-horizontal-l {
  gap: 16px;
}
.ds-fieldset__fields--space-horizontal-xl {
  gap: 20px;
}
.ds-fieldset__fields--space-vertical-s {
  gap: 6px;
}
.ds-fieldset__fields--space-vertical-m {
  gap: 10px;
}
.ds-fieldset__fields--space-vertical-l {
  gap: 16px;
}
.ds-fieldset__fields--space-vertical-xl {
  gap: 20px;
}
.ds-fieldset__tip {
  margin-top: 2px;
  grid-area: tip;
}
.ds-toast {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding: 0;
  display: flex;
  width: 464px;
  padding: 16px 24px;
  position: fixed;
  bottom: var(--offset-bottom);
  left: var(--offset-left);
  z-index: 2147483247;
  flex-direction: column;
  background-color: #1e1e1e;
  color: #f3f3f3;
}
.ds-toast:before,
.ds-toast:after {
  box-sizing: border-box;
}
.ds-toast__close {
  position: absolute;
  top: 6px;
  right: 6px;
}
.ds-toast__header {
  font-size: 14px;
  color: #373737;
  font-weight: bold;
  line-height: 18px;
  display: flex;
  -moz-column-gap: 6px;
       column-gap: 6px;
  align-items: center;
  color: #f3f3f3;
}
.ds-toast__content {
  padding-top: 16px;
  font-size: 12px;
}
.ds-warning-box {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  text-decoration: none;
  text-indent: 0;
  font-size: 12px;
  line-height: 16px;
  padding: 10px 10px 10px 34px;
  position: relative;
  background: #fff9e5;
  color: #806000;
}
.ds-warning-box:before,
.ds-warning-box:after {
  box-sizing: border-box;
}
.ds-warning-box::before {
  color: currentColor;
  position: absolute;
  top: 10px;
  left: 10px;
}
.ds-util-edit-mode:not(.ds-util-is-active),
.ds-util-edit-mode *:not(.ds-util-is-active) {
  -webkit-user-select: initial !important;
  -moz-user-select: initial !important;
       user-select: initial !important;
  pointer-events: none !important;
}
.ds-util-edit-mode .ds-util-edit-mode--allow-click,
.ds-util-edit-mode .ds-util-is-active,
.ds-util-edit-mode .ds-util-is-active * {
  pointer-events: auto !important;
}
.ds-headline-1 {
  font-size: 42px;
  color: #373737;
  font-weight: 800;
  line-height: 50px;
}
.ds-headline-2 {
  font-size: 36px;
  color: #373737;
  font-weight: 800;
  line-height: 40px;
}
.ds-headline-3 {
  font-size: 30px;
  color: #7800ff;
  font-weight: 300;
  line-height: 36px;
}
.ds-headline-4 {
  font-size: 24px;
  color: #373737;
  font-weight: bold;
  line-height: 32px;
}
.ds-headline-5 {
  font-size: 20px;
  color: #373737;
  font-weight: normal;
  line-height: 28px;
}
.ds-headline-6 {
  font-size: 18px;
  color: #373737;
  font-weight: normal;
  line-height: 24px;
}
.ds-headline-7 {
  font-size: 16px;
  color: #373737;
  font-weight: normal;
  line-height: 20px;
}
.ds-headline-8 {
  font-size: 14px;
  color: #373737;
  font-weight: normal;
  line-height: 18px;
}
.ds-headline-9 {
  font-size: 12px;
  color: #b3b3b3;
  font-weight: normal;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ds-headline-10 {
  font-size: 10px;
  color: #515151;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ds-util-is-clickable {
  cursor: pointer;
}
.ds-util-text-ellipsis {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@font-face {
  font-family: 'uxpds-icons';
  src: url('/packs/fonts/uxpds-icons-1770372218.woff?v=1770372218') format('woff');
  font-style: normal;
  font-weight: normal;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*:before,
*:after {
  box-sizing: border-box;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
img,
fieldset {
  border: none;
}
a,
object,
input:focus,
textarea:focus,
button:focus {
  outline: none !important;
}
li {
  list-style: none;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: bold;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
input[type='checkbox'],
input[type='radio'],
select {
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary,
video,
img,
object,
iframe {
  display: block;
}
ul,
ol {
  margin-bottom: 0;
}
html {
  height: 100%;
  position: relative;
  background: #fff;
  overflow: auto;
}
body {
  min-height: 100%;
  color: #5e5e5e;
  font-family: "ProximaNova", sans-serif;
  font-size: 18px;
  line-height: 133%;
  overflow-x: hidden;
}
a {
  cursor: pointer;
}
h1 {
  color: inherit;
  font-size: 60px;
  font-weight: 700;
  text-transform: none;
  line-height: 100%;
}
h2 {
  color: inherit;
  font-size: 42px;
  font-weight: 700;
  text-transform: none;
  line-height: 129%;
}
h3 {
  color: inherit;
  font-size: 36px;
  font-weight: 300;
  text-transform: none;
  line-height: 129%;
}
h4 {
  color: inherit;
  font-size: 18px;
  font-weight: normal;
  text-transform: none;
  line-height: 24px;
}
h5 {
  color: inherit;
  font-size: 16px;
  font-weight: normal;
  text-transform: none;
  line-height: 20px;
}
h6 {
  color: inherit;
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
  line-height: 18px;
}
p,
ul,
ol,
address {
  margin-bottom: 11px;
}
p + ul,
p + ol {
  margin-top: -11px;
}
ol {
  padding-left: 22px;
}
ol ol,
ol ul,
ol nav,
ul ol,
ul ul,
ul nav,
nav ol,
nav ul,
nav nav {
  margin-bottom: 0;
}
ol li {
  list-style: decimal;
}
address {
  font-style: italic;
}
td,
th {
  font-family: "ProximaNova", sans-serif;
  font-size: 18px;
  line-height: 133%;
}
::-moz-selection {
  background: #4d98ff;
  color: #fff;
}
::selection {
  background: #4d98ff;
  color: #fff;
}
/* CORE: fonts */
@font-face {
  font-family: 'ProximaNova';
  src: url('/packs/fonts/ProximaNova-RegularWeb.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('/packs/fonts/ProximaNova-RegularItWeb.woff') format('woff');
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('/packs/fonts/ProximaNova-LightWeb.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('/packs/fonts/ProximaNova-SemiboldWeb.woff') format('woff');
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('/packs/fonts/ProximaNova-SemiboldItWeb.woff') format('woff');
  font-style: italic;
  font-weight: bold;
}
@font-face {
  font-family: 'ProximaNova';
  src: url('/packs/fonts/ProximaNova-BoldWeb.woff') format('woff');
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: 'UXPin-Homepage-20';
  src: url('/packs/fonts/UXPin-Homepage-20.woff?20160902') format('woff');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-20-"]:before,
[class*=" icon-20-"]:before {
  text-align: center;
  font-family: 'UXPin-Homepage-20';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container,
.fluid-container {
  padding-right: 20px;
  padding-left: 20px;
}
@media screen and (max-width: 736px) {
  .container,
  .fluid-container {
    padding-right: 10px;
    padding-left: 10px;
  }
}
.container.blue-style,
.fluid-container.blue-style,
.container.gray-style,
.fluid-container.gray-style {
  position: relative;
}
.container.blue-style:before,
.fluid-container.blue-style:before,
.container.gray-style:before,
.fluid-container.gray-style:before {
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  pointer-events: none;
}
.container.blue-style:before,
.fluid-container.blue-style:before {
  background: #7800FF;
}
.container.blue-style .title,
.fluid-container.blue-style .title,
.container.blue-style .subttile,
.fluid-container.blue-style .subttile {
  color: #fff;
}
.container.gray-style:before,
.fluid-container.gray-style:before {
  background: #f6f6f6;
}
.container {
  max-width: 1210px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}
@media screen and (max-width: 736px) {
  .container {
    padding-right: 10px;
    padding-left: 10px;
  }
}
.heading-section {
  width: 100%;
  margin-bottom: 81px;
  text-align: center;
}
@media screen and (max-width: 1280px) {
  .heading-section {
    margin-bottom: 65px;
  }
}
@media screen and (max-width: 800px) {
  .heading-section {
    margin-bottom: 57px;
  }
}
@media screen and (max-width: 736px) {
  .heading-section {
    margin-bottom: 20px;
  }
}
.heading-section .title,
.heading-section .subtitle {
  display: block;
}
.heading-section .title {
  font-size: 42px;
  font-weight: 300;
  line-height: 45px;
}
@media screen and (max-width: 1280px) {
  .heading-section .title {
    font-size: 34px;
    line-height: 36px;
  }
}
@media screen and (max-width: 800px) {
  .heading-section .title {
    font-size: 30px;
    line-height: 32px;
  }
}
@media screen and (max-width: 736px) {
  .heading-section .title {
    font-size: 24px;
    line-height: 30px;
  }
}
.white .heading-section .title {
  color: #373737;
}
.heading-section .subtitle {
  margin-top: 20px;
  color: #6a6a6a;
  font-size: 20px;
  font-weight: 400;
}
@media screen and (max-width: 1280px) {
  .heading-section .subtitle {
    margin-top: 16px;
    font-size: 18px;
  }
}
@media screen and (max-width: 800px) {
  .heading-section .subtitle {
    margin-top: 14px;
    font-size: 16px;
  }
}
@media screen and (max-width: 736px) {
  .heading-section .subtitle {
    margin-top: 10px;
    font-size: 14px;
  }
}
.heading-section .btn-ghost,
.heading-section .btn-solid {
  margin-top: 36px;
  font-weight: 700;
}
@media screen and (max-width: 1280px) {
  .heading-section .btn-ghost,
  .heading-section .btn-solid {
    margin-top: 29px;
  }
}
@media screen and (max-width: 800px) {
  .heading-section .btn-ghost,
  .heading-section .btn-solid {
    margin-top: 25px;
  }
}
@media screen and (max-width: 736px) {
  .heading-section .btn-ghost,
  .heading-section .btn-solid {
    margin-top: 15px;
  }
}
.heading-minor {
  width: 100%;
  margin-bottom: 16px;
  text-align: center;
}
@media screen and (max-width: 736px) {
  .heading-minor {
    margin-bottom: 5px;
  }
}
.heading-minor .title {
  color: #919191;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.heading-underline {
  border-bottom: 1px solid #e6e6e6;
  text-align: center;
}
.heading-underline .title {
  display: inline;
  padding-right: 20px;
  padding-left: 20px;
  position: relative;
  top: 12px;
  background: #fff;
  color: #5e5e5e;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.heading-underline .link {
  color: #006cff;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 16px;
}
.heading-underline .link:after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  transform: rotate(45deg) translateY(-1px);
  background-image: linear-gradient(to left, #006cff 0, #006cff 2px, rgba(0, 108, 255, 0) 2px, rgba(0, 108, 255, 0) 100%), linear-gradient(to bottom, #006cff 0, #006cff 2px, rgba(0, 108, 255, 0) 2px, rgba(0, 108, 255, 0) 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
}
.btn-ghost,
.btn-solid {
  border-radius: 8px;
  background-clip: padding-box;
  display: block;
  height: 28px;
  padding: 0 20px;
  font-family: "ProximaNova", sans-serif;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.btn-ghost.btn-wide,
.btn-solid.btn-wide {
  padding: 0 31px;
}
.btn-ghost.btn-wide.with-plus:not(.working),
.btn-solid.btn-wide.with-plus:not(.working) {
  padding-left: 57px;
}
.btn-ghost.btn-inline,
.btn-solid.btn-inline {
  display: inline-block;
}
.btn-ghost.full-width,
.btn-solid.full-width {
  display: block;
  width: 100%;
  max-width: 100%;
}
.btn-ghost.big,
.btn-solid.big {
  height: 50px !important;
  padding: 0 24px;
  line-height: 50px;
}
.btn-ghost.tiny,
.btn-solid.tiny {
  height: 20px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
}
.btn-ghost.tiny.working:after,
.btn-solid.tiny.working:after {
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  border-width: 1px;
}
.btn-ghost.with-icon:before,
.btn-solid.with-icon:before {
  margin-right: 10px;
  position: relative;
  transition: opacity 0.1s ease-out, color 0.1s ease-out;
}
.btn-ghost.with-icon:hover:before,
.btn-solid.with-icon:hover:before {
  color: #fff !important;
}
.btn-ghost.with-plus:not(.working),
.btn-solid.with-plus:not(.working) {
  padding-left: 42px;
  position: relative;
}
.btn-ghost.with-plus:not(.working):before,
.btn-solid.with-plus:not(.working):before {
  content: '+';
  box-sizing: content-box;
  width: 30px;
  height: 100%;
  border-right-style: solid;
  border-right-width: 1px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
.btn-ghost.btn-tile,
.btn-solid.btn-tile {
  height: 100% !important;
  line-height: 140% !important;
}
.btn-ghost.working,
.btn-solid.working {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  transition: none;
}
.btn-ghost.working:after,
.btn-solid.working:after {
  content: '';
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 100%;
  border: 2px solid #7800FF;
  border-top-color: transparent !important;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  animation: loading 0.5s infinite linear;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.btn-ghost.working.with-icon:before,
.btn-solid.working.with-icon:before {
  visibility: hidden;
}
.btn-ghost.working .underline-helper:after,
.btn-solid.working .underline-helper:after {
  visibility: hidden;
}
.btn-ghost:disabled,
.btn-solid:disabled {
  opacity: 0.4;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.btn-ghost.inactive,
.btn-solid.inactive {
  opacity: 0.4;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.btn-ghost {
  border-color: #d7b3ff;
  background-color: #fbf7ff;
  box-shadow: 0 1px 2px rgba(120, 0, 255, 0.07);
  color: #7800FF;
  background-color: transparent;
  border-color: rgba(120, 0, 255, 0.3);
  border-width: 1px;
  border-style: solid;
  line-height: 26px;
  transition: border-color 0.1s ease-out, background-color 0.1s ease-out, color 0.1s ease-out;
}
.btn-ghost:not(.working):hover {
  border-color: #7800FF;
  background-color: #7800FF;
  color: #fff;
}
.btn-ghost:not(.working):hover:before {
  color: #fff !important;
}
.btn-ghost:not(.working):hover span:after,
.btn-ghost:not(.working):hover .underline-helper:after {
  opacity: 0 !important;
}
.btn-ghost.with-plus:before {
  border-right-color: rgba(120, 0, 255, 0.2);
}
.btn-ghost:before {
  transition: color 0.1s ease-out;
}
.btn-ghost.blue {
  border-color: #d7b3ff;
  background-color: #fbf7ff;
  box-shadow: 0 1px 2px rgba(120, 0, 255, 0.07);
  color: #7800FF;
}
.btn-ghost.blue:not(.working):hover {
  border-color: #7800FF;
  background-color: #7800FF;
  color: #fff;
}
.btn-ghost.blue:not(.working):hover:before {
  color: #fff !important;
}
.btn-ghost.blue:not(.working):hover span:after,
.btn-ghost.blue:not(.working):hover .underline-helper:after {
  opacity: 0 !important;
}
.btn-ghost.blue.with-plus:before {
  border-right-color: rgba(120, 0, 255, 0.2);
}
.btn-ghost.green {
  border-color: #d0e6b7;
  background-color: #fafdf8;
  box-shadow: 0 1px 2px rgba(99, 173, 14, 0.07);
  color: #63ad0e;
}
.btn-ghost.green:not(.working):hover {
  border-color: #63ad0e;
  background-color: #63ad0e;
  color: #fff;
}
.btn-ghost.green:not(.working):hover:before {
  color: #fff !important;
}
.btn-ghost.green:not(.working):hover span:after,
.btn-ghost.green:not(.working):hover .underline-helper:after {
  opacity: 0 !important;
}
.btn-ghost.green.with-plus:before {
  border-right-color: rgba(99, 173, 14, 0.2);
}
.btn-ghost.red {
  border-color: #efb6b3;
  background-color: #fdf8f7;
  box-shadow: 0 1px 2px rgba(201, 11, 0, 0.07);
  color: #c90b00;
}
.btn-ghost.red:not(.working):hover {
  border-color: #c90b00;
  background-color: #c90b00;
  color: #fff;
}
.btn-ghost.red:not(.working):hover:before {
  color: #fff !important;
}
.btn-ghost.red:not(.working):hover span:after,
.btn-ghost.red:not(.working):hover .underline-helper:after {
  opacity: 0 !important;
}
.btn-ghost.red.with-plus:before {
  border-right-color: rgba(201, 11, 0, 0.2);
}
.btn-ghost.gray {
  border-color: #d2d2d2;
  background-color: #fbfbfb;
  box-shadow: 0 1px 2px rgba(106, 106, 106, 0.07);
  color: #6a6a6a;
}
.btn-ghost.gray:not(.working):hover {
  border-color: #6a6a6a;
  background-color: #6a6a6a;
  color: #fff;
}
.btn-ghost.gray:not(.working):hover:before {
  color: #fff !important;
}
.btn-ghost.gray:not(.working):hover span:after,
.btn-ghost.gray:not(.working):hover .underline-helper:after {
  opacity: 0 !important;
}
.btn-ghost.gray.with-plus:before {
  border-right-color: rgba(106, 106, 106, 0.2);
}
.btn-ghost.light-gray {
  border-color: #f8f8f8;
  background-color: #fefefe;
  box-shadow: 0 1px 2px rgba(230, 230, 230, 0.07);
  color: #e6e6e6;
  background-color: transparent;
  border-color: #e6e6e6;
  color: #515151;
}
.btn-ghost.light-gray:not(.working):hover {
  border-color: #e6e6e6;
  background-color: #e6e6e6;
  color: #fff;
}
.btn-ghost.light-gray:not(.working):hover:before {
  color: #fff !important;
}
.btn-ghost.light-gray:not(.working):hover span:after,
.btn-ghost.light-gray:not(.working):hover .underline-helper:after {
  opacity: 0 !important;
}
.btn-ghost.light-gray.with-plus:before {
  border-right-color: rgba(230, 230, 230, 0.2);
}
.btn-ghost.light-gray:before {
  color: #515151;
}
.btn-ghost.light-gray:not(.working):hover,
.btn-ghost.light-gray:not(.working):hover:before {
  color: #515151 !important;
}
.btn-ghost.light-gray.working:after {
  border-color: rgba(81, 81, 81, 0.5);
}
.btn-ghost.white {
  border-color: #ffffff;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.07);
  color: #fff;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-ghost.white:not(.working):hover {
  border-color: #fff;
  background-color: #fff;
  color: #fff;
}
.btn-ghost.white:not(.working):hover:before {
  color: #fff !important;
}
.btn-ghost.white:not(.working):hover span:after,
.btn-ghost.white:not(.working):hover .underline-helper:after {
  opacity: 0 !important;
}
.btn-ghost.white.with-plus:before {
  border-right-color: rgba(255, 255, 255, 0.2);
}
.btn-ghost.white:not(.working):hover {
  color: #7800FF;
}
.btn-ghost.dashed {
  border-style: dashed;
  background: transparent;
}
.btn-ghost.dashed.highlighted {
  border-style: solid;
}
.btn-ghost.with-small-plus > span {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 50%, rgba(81, 81, 81, 0.3) 75%);
  background-position: 0 10px;
  background-repeat: repeat-x;
  background-size: 2px 2px;
  overflow: hidden;
  margin-left: 10px;
  position: relative;
  line-height: 14px;
}
.firefox .btn-ghost.with-small-plus > span {
  background-position: 0 11px;
}
.dark-version .btn-ghost.with-small-plus > span {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.3) 75%);
}
.btn-ghost.with-small-plus > span:before {
  content: '+';
  display: block;
  visibility: inherit;
  opacity: inherit;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: -10px;
  font-size: 14px;
  line-height: 7px;
  pointer-events: inherit;
}
.btn-ghost.with-small-plus > span:after {
  display: none;
}
.btn-ghost.small-height,
.btn-ghost.medium-size {
  height: 28px;
  line-height: 28px;
}
.btn-ghost.medium-size {
  font-size: 12px;
}
.btn-ghost.with-plus:before {
  line-height: 26px;
}
.btn-ghost.gray-style {
  border: 1px solid rgba(106, 106, 106, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #919191;
}
.btn-ghost.gray-style:hover {
  background-color: rgba(106, 106, 106, 0.3);
  color: #fff;
}
.btn-ghost[data-status='rejected'] {
  background-color: #e20c00;
  border: 0;
  color: #fff;
  pointer-events: none;
}
.btn-ghost[data-status='rejected']:not(.working):hover {
  background-color: #ff2216;
}
.btn-ghost[data-status='rejected']:before {
  color: #fff !important;
}
.btn-ghost[data-status='accepted'] {
  background-color: #63ad0e;
  border: 0;
  color: #fff;
  pointer-events: none;
}
.btn-ghost[data-status='accepted']:not(.working):hover {
  background-color: #7edc12;
}
.btn-ghost[data-status='accepted']:before {
  color: #fff !important;
}
.btn-solid {
  background-color: #7800FF;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #fff;
  line-height: 28px;
  font-weight: bold;
  transition: background-color 0.1s ease-out;
}
.btn-solid:not(.working):hover {
  background-color: #9333ff;
}
.btn-solid:before {
  color: #fff !important;
}
.btn-solid.blue {
  background-color: #7800FF;
}
.btn-solid.blue:not(.working):hover {
  background-color: #9333ff;
}
.btn-solid.blue:before {
  color: #fff !important;
}
.btn-solid.green {
  background-color: #63ad0e;
}
.btn-solid.green:not(.working):hover {
  background-color: #7edc12;
}
.btn-solid.green:before {
  color: #fff !important;
}
.btn-solid.red {
  background-color: #fb0d00;
}
.btn-solid.red:not(.working):hover {
  background-color: #ff3b30;
}
.btn-solid.red:before {
  color: #fff !important;
}
.btn-solid.white {
  background-color: #fff;
  color: #7800FF;
}
.btn-solid.white:not(.working):hover {
  background-color: #ffffff;
}
.btn-solid.white:before {
  color: #fff !important;
}
.btn-solid.white:hover {
  background-color: #f5f5f5 !important;
}
.btn-solid.gray {
  background-color: #6a6a6a;
}
.btn-solid.gray:not(.working):hover {
  background-color: #848484;
}
.btn-solid.gray:before {
  color: #fff !important;
}
.btn-solid.light-gray {
  background-color: #dadada;
  color: #373737;
}
.btn-solid.light-gray:not(.working):hover {
  background-color: #f3f3f3;
}
.btn-solid.light-gray:before {
  color: #fff !important;
}
.btn-solid.lighter-gray {
  background-color: #f3f3f3;
}
.btn-solid.lighter-gray:not(.working):hover {
  background-color: #ffffff;
}
.btn-solid.lighter-gray:before {
  color: #fff !important;
}
.btn-solid.dark-style {
  background-color: #2b2b2b;
  color: #ffd34d;
}
.btn-solid.dark-style:not(.working):hover {
  background-color: #444444;
}
.btn-solid.dark-style:before {
  color: #fff !important;
}
.btn-solid.dark-style:hover {
  background: #1e1e1e;
}
.btn-solid.with-plus:before {
  line-height: 28px;
}
.btn-solid.working:after {
  border-color: transparent #fff #fff;
}
.btn-solid.inactive {
  opacity: 1;
  background: #dadada;
}
.btn-solid.inactive span:after,
.btn-solid.inactive .underline-helper:after {
  display: none;
}
.btn-link-style {
  border-bottom: 1px solid;
  text-decoration: none !important;
  line-height: 14px;
  transition: border-color 0.2s ease-in;
  border-bottom-color: rgba(120, 0, 255, 0.5);
  color: #7800FF;
  font-size: 14px;
  line-height: 20px;
  background-color: transparent;
  border: 0;
}
.btn-link-style:hover {
  border-bottom-color: transparent !important;
}
.btn-icon {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  position: relative;
  background: transparent;
  text-decoration: none;
  text-indent: -5000px;
  cursor: pointer;
}
.btn-icon .tooltip {
  display: block;
  height: 0;
  text-indent: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s ease-in 0s, visibility 0s ease-in 0s;
}
.with-labels .btn-icon .btn-label {
  transition: opacity 0.2s ease-out 0s;
}
.with-labels .btn-icon .btn-label:before {
  transition: color 0.1s ease-out 0s;
}
.btn-icon[data-show-node="tooltip"]:hover:not(.active) .tooltip {
  height: auto;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}
.with-labels .btn-icon[data-show-node="tooltip"]:hover:not(.active) .btn-label {
  opacity: 0;
  transition: opacity 0.2s ease-out 0.2s;
}
.desktop-app .btn-icon {
  cursor: default !important;
}
.btn-icon.full-width {
  width: 100%;
  height: auto;
}
.btn-icon.full-width:not(.inline-label) .btn-label {
  height: auto;
  position: static;
}
.firefox .btn-icon.full-width:not(.inline-label) .btn-label {
  pointer-events: none;
}
.btn-icon.full-width:not(.inline-label) .btn-label:before {
  display: block !important;
  left: 0;
  font-size: 14px;
  line-height: 1;
}
.btn-icon.ghost-style {
  border-color: rgba(120, 0, 255, 0.2);
}
.btn-icon.ghost-gray-style {
  border-color: #e6e6e6;
  color: #5e5e5e;
}
.dark-version .btn-icon.ghost-gray-style {
  border-color: #5e5e5e;
  color: #fff;
}
.dark-version .btn-icon.ghost-gray-style:not(.inactive-feature):not(.active):hover {
  border-color: #6a6a6a;
  background: #515151 !important;
}
.btn-icon.ghost-gray-style:not(.inactive-feature):not(.active):hover {
  background: #f6f6f6 !important;
}
.btn-icon.ghost-gray-style:disabled {
  pointer-events: none;
}
.btn-icon.ghost-gray-style:disabled:before {
  opacity: 0.5;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.btn-icon.neutral-style {
  color: #919191;
}
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-font-'],
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-font-'],
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-general-'],
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-general-'],
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' ds-icon'] {
  background-color: #f6f6f6;
  box-shadow: none;
}
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-font-']:before,
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-font-']:before,
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-general-']:before,
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-general-']:before,
.btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' ds-icon']:before {
  color: #919191;
}
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-font-'],
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-font-'],
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-general-'],
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-general-'],
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' ds-icon'] {
  background-color: #515151;
}
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-font-']:before,
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-font-']:before,
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-general-']:before,
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-general-']:before,
.dark-version .btn-icon.neutral-style:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' ds-icon']:before {
  color: #f3f3f3;
}
.btn-icon.neutral-style.destructive-action:active[class^='icon-font-'],
.btn-icon.neutral-style.destructive-action:active[class*=' icon-font-'],
.btn-icon.neutral-style.destructive-action:active[class^='icon-general-'],
.btn-icon.neutral-style.destructive-action:active[class*=' icon-general-'],
.btn-icon.neutral-style.destructive-action:active[class*=' ds-icon'] {
  background-color: #ffedec !important;
}
.btn-icon.neutral-style.destructive-action:active[class^='icon-font-']:before,
.btn-icon.neutral-style.destructive-action:active[class*=' icon-font-']:before,
.btn-icon.neutral-style.destructive-action:active[class^='icon-general-']:before,
.btn-icon.neutral-style.destructive-action:active[class*=' icon-general-']:before,
.btn-icon.neutral-style.destructive-action:active[class*=' ds-icon']:before {
  color: #fb0d00 !important;
}
.btn-icon.neutral-style.onClick-visual-different:active[class^='icon-font-'],
.btn-icon.neutral-style.onClick-visual-different:active[class*=' icon-font-'],
.btn-icon.neutral-style.onClick-visual-different:active[class^='icon-general-'],
.btn-icon.neutral-style.onClick-visual-different:active[class*=' icon-general-'],
.btn-icon.neutral-style.onClick-visual-different:active[class*=' ds-icon'] {
  background-color: #dadada !important;
}
.dark-version .btn-icon.neutral-style.onClick-visual-different:active[class^='icon-font-'],
.dark-version .btn-icon.neutral-style.onClick-visual-different:active[class*=' icon-font-'],
.dark-version .btn-icon.neutral-style.onClick-visual-different:active[class^='icon-general-'],
.dark-version .btn-icon.neutral-style.onClick-visual-different:active[class*=' icon-general-'],
.dark-version .btn-icon.neutral-style.onClick-visual-different:active[class*=' ds-icon'] {
  background-color: #b3b3b3 !important;
}
.btn-icon.dark-faded-style {
  border: none;
  background: rgba(0, 0, 0, 0.5);
}
.btn-icon.lite-hover:not(.inactive-feature):hover:before {
  color: #7800FF !important;
}
.dark-version .btn-icon.lite-hover:not(.inactive-feature):hover:before {
  color: currentColor !important;
}
.btn-icon.lite-hover:not(.inactive-feature):hover .btn-label {
  color: #7800FF;
}
.btn-icon.round-style {
  border-radius: 50%;
}
.btn-icon.with-icon {
  position: relative;
}
.btn-icon.small {
  width: 24px;
  height: 24px;
}
.btn-icon.small[class^='ds-icon--font']:before,
.btn-icon.small[class*=' ds-icon--font']:before {
  width: 20px;
  height: 20px;
  line-height: 20px !important;
}
.btn-icon.tiny {
  width: 18px;
  height: 18px;
}
.btn-icon.tiny[class^='ds-icon--font']:before,
.btn-icon.tiny[class*=' ds-icon--font']:before {
  font-size: 8px;
  width: 14px;
  height: 14px;
  line-height: 14px !important;
}
.btn-icon[class^='ds-icon--font']:before,
.btn-icon[class*='ds-icon--font']:before,
.btn-icon[class^='icon-font-']:before,
.btn-icon[class*=' icon-font-']:before,
.btn-icon[class^='icon-general-']:before,
.btn-icon[class*=' icon-general-']:before {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  text-indent: 0;
  line-height: 30px;
}
.firefox .btn-icon[class^='ds-icon--font']:before,
.firefox .btn-icon[class*='ds-icon--font']:before,
.firefox .btn-icon[class^='icon-font-']:before,
.firefox .btn-icon[class*=' icon-font-']:before,
.firefox .btn-icon[class^='icon-general-']:before,
.firefox .btn-icon[class*=' icon-general-']:before {
  line-height: 28px;
}
.btn-icon:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover {
  background: #7800FF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-icon:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-font-']:before,
.btn-icon:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-font-']:before,
.btn-icon:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class^='icon-general-']:before,
.btn-icon:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' icon-general-']:before,
.btn-icon:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover[class*=' ds-icon']:before {
  color: #fff;
}
.btn-icon.active:not(.lite-hover) {
  border-color: transparent;
  background-color: rgba(0, 0, 0, 0.1);
}
.btn-icon.active:not(.lite-hover):before {
  color: #5e5e5e !important;
}
.btn-icon.active.lite-hover:before {
  color: #7800FF !important;
}
.btn-icon.active:not(.inline-label) .btn-label {
  opacity: 0;
}
.btn-icon.inactive {
  opacity: 0.2;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
}
.btn-icon.inactive-feature {
  cursor: default;
}
.btn-icon.inactive-feature:before {
  opacity: 0.4;
}
.btn-icon.inactive-feature.ghost-gray-style {
  border-color: transparent;
}
.btn-icon:not(.inline-label) .btn-label {
  height: 10px;
  position: absolute;
  bottom: -8px;
  left: 50%;
  color: #6a6a6a;
  font-size: 0;
  font-weight: normal;
  white-space: nowrap;
}
.btn-icon:not(.inline-label) .btn-label:before {
  content: attr(data-label);
  display: none;
  position: relative;
  left: -50%;
  color: inherit;
  font-size: 10px;
  line-height: 100%;
  text-indent: 0;
}
.with-labels .btn-icon:not(.inline-label) .btn-label:before {
  display: block;
}
@media screen and (max-width: 1366px) {
  .btn-icon:not(.inline-label) .btn-label {
    bottom: -6px;
  }
}
.with-labels .btn-icon.inline-label {
  border-bottom: 1px solid;
  text-decoration: none !important;
  line-height: 14px;
  transition: border-color 0.2s ease-in;
  border-bottom-color: rgba(120, 0, 255, 0.5);
  width: auto;
  height: 14px;
  margin-left: 12px;
  border-width: 0 0 1px 0;
  top: 18px;
  font-size: 12px;
  font-weight: normal;
  text-align: right;
  text-indent: 0;
}
.with-labels .btn-icon.inline-label:hover {
  border-bottom-color: transparent !important;
}
@media screen and (max-width: 1366px) {
  .with-labels .btn-icon.inline-label {
    top: 14px;
  }
}
.with-labels .btn-icon.inline-label:before {
  width: auto;
  height: auto;
  top: -1px;
  left: -12px;
  color: #7800FF;
  font-size: 12px;
  line-height: 12px;
}
.with-labels .btn-icon.inline-label:hover {
  background: none !important;
  box-shadow: none !important;
}
.btn-icon.gray {
  background: #f3f3f3;
  color: #515151 !important;
}
.with-labels .btn-icon.gray {
  background: none !important;
}
.btn-icon.gray,
.with-labels .btn-icon.gray {
  border-color: #f3f3f3;
}
.btn-icon.gray:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover {
  border-color: #e6e6e6;
  background: #e6e6e6;
}
.btn-icon.gray:not(.active):not(.inactive):not(.inactive-feature):not(.lite-hover):not(.ghost-gray-style):not(.without-action):hover:before {
  color: #515151 !important;
}
.btn-icon .btn-icon-text {
  display: block;
  width: 100%;
  height: 100%;
}
.btns-group:not(.stretch-group):after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
}
.btns-group.natural-align {
  display: flex;
  align-items: center;
}
.btns-group.natural-align.on-right {
  justify-content: flex-end;
}
.btns-group.stretch-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btns-group.stretch-group > a,
.btns-group.stretch-group > li,
.btns-group.stretch-group > button {
  display: block;
  width: calc(50% - 2px);
}
.btns-group.stretch-group > a:not(:first-of-type),
.btns-group.stretch-group > li:not(:first-of-type),
.btns-group.stretch-group > button:not(:first-of-type) {
  margin-left: 4px;
}
.btns-group.vertical .btn-icon + .btn-icon {
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.btns-group.vertical .btn-icon:not(:only-child):first-child {
  border-bottom-color: #f6f6f6;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btns-group.horizontal.with-gap li + li {
  margin-left: 10px;
}
.btns-group.horizontal:not(.with-gap) .btn-icon + .btn-icon {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btns-group.horizontal:not(.with-gap) .btn-icon:not(:only-child):first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btns-group:not(.vertical):not(.horizontal):not(.stretch-group) li {
  float: left;
}
.btns-group:not(.vertical):not(.horizontal):not(.stretch-group) li + li {
  margin-left: 20px;
}
.btns-group li {
  list-style: none;
}
.btn-ghost.medium,
.btn-solid.medium {
  height: 38px;
  line-height: 38px;
}
.btn-sign-up {
  width: 180px;
  font-size: 16px;
}
a {
  color: #6a6a6a;
  font-weight: normal;
  text-decoration: none;
}
a:after {
  bottom: 2px;
}
a.underline-link {
  z-index: 0;
  position: relative;
}
a.underline-link:after {
  content: '';
  border-bottom: 1px solid #dadada;
  bottom: 0;
  left: 0;
  opacity: 1;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
  z-index: -1;
}
a.underline-link:hover:after {
  opacity: 0;
}
a.blue-link {
  color: #006cff;
}
a.blue-link.underline-link {
  z-index: 0;
  position: relative;
}
a.blue-link.underline-link:after {
  content: '';
  border-bottom: 1px solid rgba(0, 108, 255, 0.3);
  bottom: 0;
  left: 0;
  opacity: 1;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
  z-index: -1;
}
a.blue-link.underline-link:hover:after {
  opacity: 0;
}
a.white-link {
  color: #fff;
}
a.white-link.underline-link {
  z-index: 0;
  position: relative;
}
a.white-link.underline-link:after {
  content: '';
  border-bottom: 1px solid #6a6a6a;
  bottom: 0;
  left: 0;
  opacity: 1;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
  z-index: -1;
}
a.white-link.underline-link:hover:after {
  opacity: 0;
}
a.blue-hover:hover {
  color: #006cff !important;
}
a.blue-hover:hover:before {
  color: #006cff !important;
}
a.red-hover:hover {
  color: #c90b00 !important;
}
a.red-hover:hover:before {
  color: #c90b00 !important;
}
a.disabled {
  opacity: 0.5;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.list {
  padding-left: 15px;
  color: #6a6a6a;
}
@media screen and (max-width: 1280px) {
  .list {
    margin-bottom: 32px;
  }
}
@media screen and (max-width: 736px) {
  .list {
    margin-bottom: 15px;
  }
}
.list li {
  margin-top: -2px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 30px;
}
@media screen and (max-width: 1280px) {
  .list li {
    line-height: 24px;
  }
}
@media screen and (max-width: 736px) {
  .list li {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 23px;
  }
}
.unordered.list li {
  list-style: disc;
}
.list li span {
  position: relative;
  top: 2px;
  font-size: 18px;
}
@media screen and (max-width: 1280px) {
  .list li span {
    font-size: 16px;
  }
}
.logo-wrapper {
  display: flex;
  align-items: center;
}
.logo {
  display: block;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  background: url('/images/homepage/uxpin-white.svg') no-repeat;
  background-position: center;
  background-size: 70px 70px;
  text-indent: -9999px;
}
.logo.black {
  background: url('/images/homepage/uxpin-black.svg') no-repeat;
  border-color: #000;
}
.logo-tagline {
  margin-left: 20px;
  font-size: 12px;
}
@media screen and (max-width: 736px) {
  .logo-tagline {
    display: none;
  }
}
/*
	Cloud:
		/ global:
			.standard - no js positioning (for old UI)
			.options-cloud - has list elements
			.with-icons - increased left padding
			.with-scroll-options - need to be added if use .options-list & .options-separator
			.without-arrow - cloud without arrow
			.select-style-list - for dashboard usage similar to hulk-select.
		/ width (default is 230px width):
			.big - 300px width
			.small - 160px width
			.auto-width - auto width
		/ row size (default is 30px height):
			.tall - 24px row height

	Elements:
		.options-list - ul inside cloud
		.checkbox-list - ul with label and avatar inside
		.scroll-ready - ul with overflow auto
		.separator - element with separate line above
		.separator.more-spacing - separator with increased margin
		.options-separator - separator with label
		.no-found - darken element + centered
		.custom-color - text with color different than default

	Subcloud:
		There is possibility to add CSS positioned sub-level cloud (.sub-cloud)
		just add .with-sub-cloud class to <li> element and proper container inside
		e.g. <ul class="cloud sub-cloud">
		* - width is based on content
*/
.cloud {
  display: none;
  width: 230px;
  padding: 15px 20px 17px;
  border-radius: 8px;
  position: absolute;
  z-index: 2147483447;
  flex-direction: column;
  background-color: rgba(30, 30, 30, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  font-family: "ProximaNova", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #5e5e5e;
  box-sizing: border-box;
}
.cloud *,
.cloud *:after,
.cloud *:before {
  box-sizing: border-box;
}
.cloud.text-link-cloud {
  width: 262px;
  background: #373737;
}
.cloud.text-link-cloud--error .ds-input__field {
  border-color: #ff0020 !important;
}
.cloud.visible,
[data-show-node="cloud"]:hover .cloud {
  display: flex;
}
.cloud.standard {
  left: 50%;
  transform: translateX(-50%);
}
.cloud.standard:before {
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}
.cloud.without-arrow:before {
  display: none;
}
.cloud:before {
  content: '';
  display: block;
  height: 4px;
  border-bottom: 4px solid rgba(30, 30, 30, 0.97);
  margin-top: -2px;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin: 0;
  position: absolute;
}
.cloud.arrow-top:before {
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}
.cloud.arrow-top-right:before {
  top: -4px;
  right: 15px;
}
.cloud.arrow-top-left:before {
  top: -4px;
  left: 15px;
}
.cloud.arrow-right:before {
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(90deg);
}
.cloud.arrow-right-top:before {
  top: 15px;
  right: -6px;
  transform: rotate(90deg);
}
.cloud.arrow-right-bottom:before {
  right: -6px;
  bottom: 15px;
  transform: rotate(90deg);
}
.cloud.arrow-bottom:before {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scale(-1);
}
.cloud.arrow-bottom-right:before {
  right: 15px;
  bottom: -4px;
  transform: scale(-1);
}
.cloud.arrow-bottom-left:before {
  bottom: -4px;
  left: 15px;
  transform: scale(-1);
}
.cloud.arrow-left:before {
  top: 50%;
  left: -6px;
  transform: translateY(-50%) rotate(-90deg);
}
.cloud.arrow-left-top:before {
  top: 15px;
  left: -6px;
  transform: rotate(-90deg);
}
.cloud.arrow-left-bottom:before {
  bottom: 15px;
  left: -6px;
  transform: rotate(-90deg);
}
.cloud:not(.without-styles) a:not(.only-icon-font):not(.info-label):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) p:not(.only-icon-font):not(.info-label):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) h3:not(.only-icon-font):not(.info-label):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) label:not(.only-icon-font):not(.info-label):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) input:not(.only-icon-font):not(.info-label):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) span:not(.only-icon-font):not(.info-label):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) .options-list-link:not(.only-icon-font):not(.info-label):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]) {
  font-size: 14px;
}
.cloud:not(.without-styles) a:not(.disabled):not(.custom-color):not([class*='cm-']):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) p:not(.disabled):not(.custom-color):not([class*='cm-']):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) h3:not(.disabled):not(.custom-color):not([class*='cm-']):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) label:not(.disabled):not(.custom-color):not([class*='cm-']):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) input:not(.disabled):not(.custom-color):not([class*='cm-']):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) span:not(.disabled):not(.custom-color):not([class*='cm-']):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]),
.cloud:not(.without-styles) .options-list-link:not(.disabled):not(.custom-color):not([class*='cm-']):not(.shortcut-text):not([class*="ds-badge"]):not([class*="ds-link"]):not([class*="ds-tooltip"]):not([class*="ds-avatar"]):not([class*="ds-heading-separator"]):not([class*="ds-heading-separator__text-helper"]):not([class*="ds-label"]):not([class*="ds-inline-edit"]) {
  color: #e6e6e6;
}
.cloud:not(.without-styles) a.disabled:not(.custom-color),
.cloud:not(.without-styles) p.disabled:not(.custom-color),
.cloud:not(.without-styles) h3.disabled:not(.custom-color),
.cloud:not(.without-styles) label.disabled:not(.custom-color),
.cloud:not(.without-styles) input.disabled:not(.custom-color),
.cloud:not(.without-styles) span.disabled:not(.custom-color),
.cloud:not(.without-styles) .options-list-link.disabled:not(.custom-color) {
  pointer-events: none;
}
.cloud:not(.without-styles) a.disabled:not(.custom-color),
.cloud:not(.without-styles) p.disabled:not(.custom-color),
.cloud:not(.without-styles) h3.disabled:not(.custom-color),
.cloud:not(.without-styles) label.disabled:not(.custom-color),
.cloud:not(.without-styles) input.disabled:not(.custom-color),
.cloud:not(.without-styles) span.disabled:not(.custom-color),
.cloud:not(.without-styles) .options-list-link.disabled:not(.custom-color),
.cloud:not(.without-styles) a.disabled:not(.custom-color):before,
.cloud:not(.without-styles) p.disabled:not(.custom-color):before,
.cloud:not(.without-styles) h3.disabled:not(.custom-color):before,
.cloud:not(.without-styles) label.disabled:not(.custom-color):before,
.cloud:not(.without-styles) input.disabled:not(.custom-color):before,
.cloud:not(.without-styles) span.disabled:not(.custom-color):before,
.cloud:not(.without-styles) .options-list-link.disabled:not(.custom-color):before,
.cloud:not(.without-styles) a.disabled:not(.custom-color) > span,
.cloud:not(.without-styles) p.disabled:not(.custom-color) > span,
.cloud:not(.without-styles) h3.disabled:not(.custom-color) > span,
.cloud:not(.without-styles) label.disabled:not(.custom-color) > span,
.cloud:not(.without-styles) input.disabled:not(.custom-color) > span,
.cloud:not(.without-styles) span.disabled:not(.custom-color) > span,
.cloud:not(.without-styles) .options-list-link.disabled:not(.custom-color) > span {
  color: rgba(230, 230, 230, 0.5) !important;
}
.cloud .cloud-icon-wrapper {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 23px;
  top: 17px;
  cursor: pointer;
}
.cloud .options-list-link {
  width: 100%;
  border: 0;
  background-color: transparent;
  font-family: inherit;
  text-align: left;
}
.cloud > p + p {
  margin-top: 18px;
}
.cloud li {
  list-style: none;
}
.cloud:not(.cloud-with-settings) .control-wrapper .state-helper:checked + .fake-choose-label:before {
  border-width: 1px;
  border-color: #fff;
  background: none;
}
.cloud:not(.cloud-with-settings) .control-wrapper .state-helper:checked + .fake-choose-label:after {
  background: #fff;
}
.cloud:not(.cloud-with-settings) .control-wrapper .fake-choose-label.fake-radio {
  position: relative;
}
.cloud:not(.cloud-with-settings) .control-wrapper .fake-choose-label.fake-radio:before {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-color: #fff;
  background: none;
}
.cloud:not(.cloud-with-settings) .control-wrapper .fake-choose-label.fake-radio:after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 3px;
  background: transparent;
}
.cloud.big {
  width: 300px;
}
.cloud.small {
  width: 160px;
}
.cloud.auto-width {
  width: auto;
}
.cloud.options-cloud {
  padding: 0;
}
.cloud.options-cloud > a:not([class*="ds-link"]),
.cloud.options-cloud > p:not([class*="ds-link"]),
.cloud.options-cloud .options-list-link:not([class*="ds-link"]) {
  padding: 7px 9px 5px 9px;
}
.tall.cloud.options-cloud > a:not([class*="ds-link"]),
.tall.cloud.options-cloud > p:not([class*="ds-link"]),
.tall.cloud.options-cloud .options-list-link:not([class*="ds-link"]) {
  padding: 4px 9px 2px 9px;
}
.cloud.options-cloud .ds-input--cloud-input-text {
  margin-top: 5px;
}
.cloud.options-cloud.scroll-ready,
.cloud.options-cloud .scroll-ready {
  overflow: auto;
}
.cloud.options-cloud .padded-content,
.cloud.options-cloud .options-list .padded-content {
  padding: 2px 9px 4px;
}
.tall.cloud.options-cloud .padded-content,
.tall.cloud.options-cloud .options-list .padded-content {
  padding: 4px 9px 2px 9px;
}
.cloud.options-cloud .padded-content.selected,
.cloud.options-cloud .options-list .padded-content.selected {
  background-color: #5e5e5e;
}
.cloud.options-cloud.without-hover > li > a.active:not(.disabled),
.cloud.options-cloud .options-list.without-hover > li > a.active:not(.disabled),
.cloud.options-cloud.without-hover > li > span.active:not(.disabled),
.cloud.options-cloud .options-list.without-hover > li > span.active:not(.disabled),
.cloud.options-cloud.without-hover > li .options-list-link.active:not(.disabled),
.cloud.options-cloud .options-list.without-hover > li .options-list-link.active:not(.disabled) {
  background-color: #7800FF;
}
.cloud.options-cloud.without-hover > li > a.active:not(.disabled).danger,
.cloud.options-cloud .options-list.without-hover > li > a.active:not(.disabled).danger,
.cloud.options-cloud.without-hover > li > span.active:not(.disabled).danger,
.cloud.options-cloud .options-list.without-hover > li > span.active:not(.disabled).danger,
.cloud.options-cloud.without-hover > li .options-list-link.active:not(.disabled).danger,
.cloud.options-cloud .options-list.without-hover > li .options-list-link.active:not(.disabled).danger {
  background-color: #c90b00;
  color: #fff;
}
.cloud.options-cloud:not(.without-hover) > li > a:hover:not(.disabled),
.cloud.options-cloud .options-list:not(.without-hover) > li > a:hover:not(.disabled),
.cloud.options-cloud:not(.without-hover) > li > span:hover:not(.disabled),
.cloud.options-cloud .options-list:not(.without-hover) > li > span:hover:not(.disabled),
.cloud.options-cloud:not(.without-hover) > li .options-list-link:hover:not(.disabled),
.cloud.options-cloud .options-list:not(.without-hover) > li .options-list-link:hover:not(.disabled),
.cloud.options-cloud:not(.without-hover) > li > a.active:not(.disabled),
.cloud.options-cloud .options-list:not(.without-hover) > li > a.active:not(.disabled),
.cloud.options-cloud:not(.without-hover) > li > span.active:not(.disabled),
.cloud.options-cloud .options-list:not(.without-hover) > li > span.active:not(.disabled),
.cloud.options-cloud:not(.without-hover) > li .options-list-link.active:not(.disabled),
.cloud.options-cloud .options-list:not(.without-hover) > li .options-list-link.active:not(.disabled) {
  background-color: #7800FF;
}
.cloud.options-cloud:not(.without-hover) > li > a:hover:not(.disabled).danger,
.cloud.options-cloud .options-list:not(.without-hover) > li > a:hover:not(.disabled).danger,
.cloud.options-cloud:not(.without-hover) > li > span:hover:not(.disabled).danger,
.cloud.options-cloud .options-list:not(.without-hover) > li > span:hover:not(.disabled).danger,
.cloud.options-cloud:not(.without-hover) > li .options-list-link:hover:not(.disabled).danger,
.cloud.options-cloud .options-list:not(.without-hover) > li .options-list-link:hover:not(.disabled).danger,
.cloud.options-cloud:not(.without-hover) > li > a.active:not(.disabled).danger,
.cloud.options-cloud .options-list:not(.without-hover) > li > a.active:not(.disabled).danger,
.cloud.options-cloud:not(.without-hover) > li > span.active:not(.disabled).danger,
.cloud.options-cloud .options-list:not(.without-hover) > li > span.active:not(.disabled).danger,
.cloud.options-cloud:not(.without-hover) > li .options-list-link.active:not(.disabled).danger,
.cloud.options-cloud .options-list:not(.without-hover) > li .options-list-link.active:not(.disabled).danger {
  background-color: #c90b00;
  color: #fff;
}
.cloud.options-cloud > li > a:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.options-cloud .options-list > li > a:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.options-cloud > li > span:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.options-cloud .options-list > li > span:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.options-cloud > li .options-list-link:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.options-cloud .options-list > li .options-list-link:not([class*="ds-badge"]):not([class*="ds-link"]) {
  display: block;
  padding: 7px 9px 5px;
  border-radius: 8px;
  line-height: 1.3em;
  text-decoration: none;
}
.tall.cloud.options-cloud > li > a:not([class*="ds-badge"]):not([class*="ds-link"]),
.tall.cloud.options-cloud .options-list > li > a:not([class*="ds-badge"]):not([class*="ds-link"]),
.tall.cloud.options-cloud > li > span:not([class*="ds-badge"]):not([class*="ds-link"]),
.tall.cloud.options-cloud .options-list > li > span:not([class*="ds-badge"]):not([class*="ds-link"]),
.tall.cloud.options-cloud > li .options-list-link:not([class*="ds-badge"]):not([class*="ds-link"]),
.tall.cloud.options-cloud .options-list > li .options-list-link:not([class*="ds-badge"]):not([class*="ds-link"]) {
  padding: 4px 9px 2px 9px;
}
.with-icons.cloud.options-cloud > li > a:not([class*="ds-badge"]):not([class*="ds-link"]),
.with-icons.cloud.options-cloud .options-list > li > a:not([class*="ds-badge"]):not([class*="ds-link"]),
.with-icons.cloud.options-cloud > li > span:not([class*="ds-badge"]):not([class*="ds-link"]),
.with-icons.cloud.options-cloud .options-list > li > span:not([class*="ds-badge"]):not([class*="ds-link"]),
.with-icons.cloud.options-cloud > li .options-list-link:not([class*="ds-badge"]):not([class*="ds-link"]),
.with-icons.cloud.options-cloud .options-list > li .options-list-link:not([class*="ds-badge"]):not([class*="ds-link"]) {
  padding-left: 34px;
}
.with-icons.tall.cloud.options-cloud > li > a:before,
.with-icons.tall.cloud.options-cloud .options-list > li > a:before,
.with-icons.tall.cloud.options-cloud > li > span:before,
.with-icons.tall.cloud.options-cloud .options-list > li > span:before,
.with-icons.tall.cloud.options-cloud > li .options-list-link:before,
.with-icons.tall.cloud.options-cloud .options-list > li .options-list-link:before {
  top: 5px;
}
.cloud.options-cloud > li > a:not(.disabled),
.cloud.options-cloud .options-list > li > a:not(.disabled),
.cloud.options-cloud > li > span:not(.disabled),
.cloud.options-cloud .options-list > li > span:not(.disabled),
.cloud.options-cloud > li .options-list-link:not(.disabled),
.cloud.options-cloud .options-list > li .options-list-link:not(.disabled) {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.cloud.options-cloud > li > a:not(.disabled):hover,
.cloud.options-cloud .options-list > li > a:not(.disabled):hover,
.cloud.options-cloud > li > span:not(.disabled):hover,
.cloud.options-cloud .options-list > li > span:not(.disabled):hover,
.cloud.options-cloud > li .options-list-link:not(.disabled):hover,
.cloud.options-cloud .options-list > li .options-list-link:not(.disabled):hover,
.cloud.options-cloud > li > a:not(.disabled).active,
.cloud.options-cloud .options-list > li > a:not(.disabled).active,
.cloud.options-cloud > li > span:not(.disabled).active,
.cloud.options-cloud .options-list > li > span:not(.disabled).active,
.cloud.options-cloud > li .options-list-link:not(.disabled).active,
.cloud.options-cloud .options-list > li .options-list-link:not(.disabled).active,
.cloud.options-cloud > li > a:not(.disabled).selected,
.cloud.options-cloud .options-list > li > a:not(.disabled).selected,
.cloud.options-cloud > li > span:not(.disabled).selected,
.cloud.options-cloud .options-list > li > span:not(.disabled).selected,
.cloud.options-cloud > li .options-list-link:not(.disabled).selected,
.cloud.options-cloud .options-list > li .options-list-link:not(.disabled).selected,
.cloud.options-cloud > li > a:not(.disabled):hover span,
.cloud.options-cloud .options-list > li > a:not(.disabled):hover span,
.cloud.options-cloud > li > span:not(.disabled):hover span,
.cloud.options-cloud .options-list > li > span:not(.disabled):hover span,
.cloud.options-cloud > li .options-list-link:not(.disabled):hover span,
.cloud.options-cloud .options-list > li .options-list-link:not(.disabled):hover span,
.cloud.options-cloud > li > a:not(.disabled).active span,
.cloud.options-cloud .options-list > li > a:not(.disabled).active span,
.cloud.options-cloud > li > span:not(.disabled).active span,
.cloud.options-cloud .options-list > li > span:not(.disabled).active span,
.cloud.options-cloud > li .options-list-link:not(.disabled).active span,
.cloud.options-cloud .options-list > li .options-list-link:not(.disabled).active span,
.cloud.options-cloud > li > a:not(.disabled).selected span,
.cloud.options-cloud .options-list > li > a:not(.disabled).selected span,
.cloud.options-cloud > li > span:not(.disabled).selected span,
.cloud.options-cloud .options-list > li > span:not(.disabled).selected span,
.cloud.options-cloud > li .options-list-link:not(.disabled).selected span,
.cloud.options-cloud .options-list > li .options-list-link:not(.disabled).selected span {
  color: #fff;
}
.cloud.options-cloud > li > a:hover:not(.disabled),
.cloud.options-cloud .options-list > li > a:hover:not(.disabled),
.cloud.options-cloud > li > span:hover:not(.disabled),
.cloud.options-cloud .options-list > li > span:hover:not(.disabled),
.cloud.options-cloud > li .options-list-link:hover:not(.disabled),
.cloud.options-cloud .options-list > li .options-list-link:hover:not(.disabled),
.cloud.options-cloud > li > a.active:not(.disabled),
.cloud.options-cloud .options-list > li > a.active:not(.disabled),
.cloud.options-cloud > li > span.active:not(.disabled),
.cloud.options-cloud .options-list > li > span.active:not(.disabled),
.cloud.options-cloud > li .options-list-link.active:not(.disabled),
.cloud.options-cloud .options-list > li .options-list-link.active:not(.disabled) {
  background-color: #7800FF;
}
.cloud.options-cloud > li > a:hover:not(.disabled).danger,
.cloud.options-cloud .options-list > li > a:hover:not(.disabled).danger,
.cloud.options-cloud > li > span:hover:not(.disabled).danger,
.cloud.options-cloud .options-list > li > span:hover:not(.disabled).danger,
.cloud.options-cloud > li .options-list-link:hover:not(.disabled).danger,
.cloud.options-cloud .options-list > li .options-list-link:hover:not(.disabled).danger,
.cloud.options-cloud > li > a.active:not(.disabled).danger,
.cloud.options-cloud .options-list > li > a.active:not(.disabled).danger,
.cloud.options-cloud > li > span.active:not(.disabled).danger,
.cloud.options-cloud .options-list > li > span.active:not(.disabled).danger,
.cloud.options-cloud > li .options-list-link.active:not(.disabled).danger,
.cloud.options-cloud .options-list > li .options-list-link.active:not(.disabled).danger {
  background-color: #c90b00;
  color: #fff;
}
.cloud.options-cloud > li > a.selected,
.cloud.options-cloud .options-list > li > a.selected,
.cloud.options-cloud > li > span.selected,
.cloud.options-cloud .options-list > li > span.selected,
.cloud.options-cloud > li .options-list-link.selected,
.cloud.options-cloud .options-list > li .options-list-link.selected,
.cloud.options-cloud > li > a.disabled,
.cloud.options-cloud .options-list > li > a.disabled,
.cloud.options-cloud > li > span.disabled,
.cloud.options-cloud .options-list > li > span.disabled,
.cloud.options-cloud > li .options-list-link.disabled,
.cloud.options-cloud .options-list > li .options-list-link.disabled {
  cursor: default;
}
.cloud.options-cloud > li > a.selected,
.cloud.options-cloud .options-list > li > a.selected,
.cloud.options-cloud > li > span.selected,
.cloud.options-cloud .options-list > li > span.selected,
.cloud.options-cloud > li .options-list-link.selected,
.cloud.options-cloud .options-list > li .options-list-link.selected {
  background-color: #5e5e5e;
}
.cloud.options-cloud > li > a.disabled,
.cloud.options-cloud .options-list > li > a.disabled,
.cloud.options-cloud > li > span.disabled,
.cloud.options-cloud .options-list > li > span.disabled,
.cloud.options-cloud > li .options-list-link.disabled,
.cloud.options-cloud .options-list > li .options-list-link.disabled {
  background: none;
}
.cloud.options-cloud > li > a.danger,
.cloud.options-cloud .options-list > li > a.danger,
.cloud.options-cloud > li > span.danger,
.cloud.options-cloud .options-list > li > span.danger,
.cloud.options-cloud > li .options-list-link.danger,
.cloud.options-cloud .options-list > li .options-list-link.danger {
  color: #e20c00;
}
.cloud.options-cloud > li > a .shortcut,
.cloud.options-cloud .options-list > li > a .shortcut,
.cloud.options-cloud > li > span .shortcut,
.cloud.options-cloud .options-list > li > span .shortcut,
.cloud.options-cloud > li .options-list-link .shortcut,
.cloud.options-cloud .options-list > li .options-list-link .shortcut {
  height: 16px;
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 8px;
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.cloud.options-cloud > li .ds-choose-base--cloud-item,
.cloud.options-cloud .options-list > li .ds-choose-base--cloud-item {
  margin: 5px 0 4px 10px;
}
.cloud.options-cloud > .with-sub-cloud:hover:after,
.cloud.options-cloud .options-list > .with-sub-cloud:hover:after {
  color: #fff;
}
.cloud.options-cloud > .with-sub-cloud:hover .sub-cloud,
.cloud.options-cloud .options-list > .with-sub-cloud:hover .sub-cloud {
  display: block;
}
.cloud.options-cloud > .with-sub-cloud:after,
.cloud.options-cloud .options-list > .with-sub-cloud:after {
  content: '\E097';
  color: #919191;
  font-size: 7px;
  transform: rotate(-90deg);
  text-align: center;
  font-family: 'uxpds-icons';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: -3px;
  position: absolute;
  top: 50%;
  right: 9px;
}
.cloud.options-cloud.options-icons li > .btn-icon {
  padding-left: 35px !important;
  position: relative;
}
.cloud.options-cloud.options-icons li > .btn-icon:before {
  width: 28px;
  height: 28px;
  color: currentColor;
  line-height: 28px;
}
.cloud.options-cloud.options-icons li > .btn-icon .shortcut {
  text-indent: 0;
}
.cloud.options-cloud.options-icons li .with-icon:before {
  display: inline-block;
  width: 14px;
  margin-right: 10px;
  position: relative;
  top: 2px;
  color: currentColor;
}
.cloud.options-cloud.options-icons li .with-shortcut .shortcut {
  top: 8px;
}
.cloud.options-cloud.options-icons li .connect-merge {
  display: flex;
}
.cloud.options-cloud.options-icons li .connect-merge .connect-merge-btn {
  width: 225px;
  height: 28px;
  padding: 0;
  justify-content: space-evenly;
  box-shadow: none;
}
.cloud.options-cloud.options-icons li .connect-merge .connect-merge-btn:before {
  rotate: 45deg;
}
.cloud.options-cloud.options-icons li .connect-merge .connect-merge-btn:hover {
  background-color: #7800FF;
}
.cloud.options-cloud .checkbox-list {
  margin-top: 5px;
  margin-bottom: 6px;
}
.cloud.options-cloud .checkbox-list li {
  margin-bottom: 1px;
  list-style: none;
}
.cloud.options-cloud .checkbox-list li:last-of-type {
  margin-bottom: 0;
}
.cloud.options-cloud .checkbox-list li > form label {
  display: flex;
  padding-top: 5px;
  padding-bottom: 4px;
  align-items: center;
}
.cloud.options-cloud .radio-list {
  padding: 13px 23px;
}
.cloud.options-cloud .radio-list-separator {
  margin-bottom: 13px;
}
.cloud.options-cloud .radio-list-item {
  margin-bottom: 3px;
}
.cloud.options-cloud .radio-list-text-wrapper {
  word-break: break-word;
}
.cloud.with-icons li > a:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.with-icons .options-list li > a:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.with-icons li > span:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.with-icons .options-list li > span:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.with-icons li .options-list-link:not([class*="ds-badge"]):not([class*="ds-link"]),
.cloud.with-icons .options-list li .options-list-link:not([class*="ds-badge"]):not([class*="ds-link"]) {
  padding-left: 34px;
  position: relative;
}
.cloud.with-icons li > a:not(.custom-color):before,
.cloud.with-icons .options-list li > a:not(.custom-color):before,
.cloud.with-icons li > span:not(.custom-color):before,
.cloud.with-icons .options-list li > span:not(.custom-color):before,
.cloud.with-icons li .options-list-link:not(.custom-color):before,
.cloud.with-icons .options-list li .options-list-link:not(.custom-color):before {
  color: #e6e6e6;
  position: absolute;
  top: 9px;
  left: 10px;
}
.cloud.with-icons li > a:not(.disabled):not(.custom-color):hover:before,
.cloud.with-icons .options-list li > a:not(.disabled):not(.custom-color):hover:before,
.cloud.with-icons li > span:not(.disabled):not(.custom-color):hover:before,
.cloud.with-icons .options-list li > span:not(.disabled):not(.custom-color):hover:before,
.cloud.with-icons li .options-list-link:not(.disabled):not(.custom-color):hover:before,
.cloud.with-icons .options-list li .options-list-link:not(.disabled):not(.custom-color):hover:before,
.cloud.with-icons li > a:not(.disabled):not(.custom-color).active:before,
.cloud.with-icons .options-list li > a:not(.disabled):not(.custom-color).active:before,
.cloud.with-icons li > span:not(.disabled):not(.custom-color).active:before,
.cloud.with-icons .options-list li > span:not(.disabled):not(.custom-color).active:before,
.cloud.with-icons li .options-list-link:not(.disabled):not(.custom-color).active:before,
.cloud.with-icons .options-list li .options-list-link:not(.disabled):not(.custom-color).active:before,
.cloud.with-icons li > a:not(.disabled):not(.custom-color).selected:before,
.cloud.with-icons .options-list li > a:not(.disabled):not(.custom-color).selected:before,
.cloud.with-icons li > span:not(.disabled):not(.custom-color).selected:before,
.cloud.with-icons .options-list li > span:not(.disabled):not(.custom-color).selected:before,
.cloud.with-icons li .options-list-link:not(.disabled):not(.custom-color).selected:before,
.cloud.with-icons .options-list li .options-list-link:not(.disabled):not(.custom-color).selected:before {
  color: #fff !important;
}
.cloud.with-scroll-options {
  padding-left: 0;
  padding-right: 0;
}
.cloud.with-scroll-options .options-list {
  overflow-x: hidden;
}
.cloud.select-style-list {
  width: 274px;
  max-height: 70vh;
  background: #fff;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
  color: #6a6a6a;
}
.cloud.select-style-list .options-separator .section-name {
  color: #919191;
  font-size: 12px;
  letter-spacing: normal;
  letter-spacing: initial;
  text-transform: none;
  overflow: visible;
}
.cloud.select-style-list .options-separator .section-name:before,
.cloud.select-style-list .options-separator .section-name:after {
  background: #f0f0f0;
}
.cloud.select-style-list li {
  padding: 3px 9px 3px 24px;
  border: 1px solid #fff;
  border-radius: 8px;
  position: relative;
  flex-shrink: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.cloud.select-style-list li:not(.selected):hover {
  border-color: #f3f3f3;
  background: #f3f3f3;
  color: #414141 !important;
}
.cloud.select-style-list li.selected {
  border-color: #f3f3f3;
  background: none;
  color: #a6a6a6;
  cursor: default;
}
.cloud.select-style-list li.selected:before {
  content: '\E311';
  color: #444;
  font-size: 5px;
  text-align: center;
  font-family: 'uxpds-icons';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  margin-top: -3px;
  position: absolute;
  top: 50%;
  left: 9px;
}
.cloud.select-style-list li.disabled {
  opacity: 0.5;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cloud.permissions-cloud {
  width: 300px;
  padding: 8px 10px;
}
.cloud.permissions-cloud .list-filters {
  display: flex;
  padding: 3px 10px 8px;
  flex-shrink: 0;
}
.cloud.permissions-cloud .list-filters:before {
  display: none;
}
.cloud.permissions-cloud .list-filters > li {
  list-style: none;
}
.cloud.permissions-cloud .list-filters > li + li {
  margin-left: 15px;
  position: relative;
}
.cloud.permissions-cloud .list-filters > li + li .fake-radio:before {
  display: block;
  border: none;
  border-left: 1px solid #414141 !important;
  height: 100%;
  position: absolute;
  top: 0;
  left: -8px;
  width: 1px;
}
.cloud.permissions-cloud .list-filters > li .active + .fake-radio {
  border-color: rgba(255, 255, 255, 0);
}
.cloud.permissions-cloud .list-filters > li .active + .fake-radio:after {
  display: none;
}
.cloud.permissions-cloud .list-filters .fake-radio {
  border-bottom: 1px solid;
  text-decoration: none !important;
  line-height: 14px;
  transition: border-color 0.2s ease-in;
  border-bottom-color: #414141;
  padding-left: 0;
}
.cloud.permissions-cloud .list-filters .fake-radio:hover {
  border-bottom-color: transparent !important;
}
.cloud.permissions-cloud .list-filters .fake-radio:before {
  display: none;
}
.cloud.permissions-cloud .list-filters .fake-radio:after {
  content: '';
  position: absolute;
}
.cloud.permissions-cloud .ds-input--search.icon-general-search:before {
  margin-top: 0;
  top: 10px;
  left: 8px;
}
.cloud.permissions-cloud .fake-choose-label:before {
  border-color: #414141;
  background: none;
}
.cloud.permissions-cloud .checkbox-list label {
  display: flex;
  width: 100%;
  padding: 5px 10px 4px 31px;
  align-items: center;
}
.cloud.permissions-cloud .checkbox-list label:hover {
  background-color: #7800FF;
}
.cloud.permissions-cloud .checkbox-list label:hover:before {
  border-color: #fff !important;
}
.cloud.permissions-cloud .checkbox-list label:hover,
.cloud.permissions-cloud .checkbox-list label:hover figcaption {
  color: #fff !important;
}
.cloud.permissions-cloud .checkbox-list label:before {
  top: 11px;
  left: 10px;
}
.cloud.permissions-cloud .checkbox-list label:after {
  top: 15px;
  left: 13px;
}
.cloud.permissions-cloud .checkbox-list .user {
  display: flex;
}
.cloud.permissions-cloud .checkbox-list .name {
  padding: 3px 0 0 8px;
}
.cloud.permissions-cloud .cloud-search-wrapper {
  position: relative;
}
.cloud.permissions-cloud .cloud-search-wrapper .ds-input--search {
  position: static;
}
.cloud.permissions-cloud .cloud-search-wrapper .ds-input--search.active + .icon-general-close {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-out 0s;
}
.cloud.permissions-cloud .cloud-search-wrapper .ds-icon--font__search:before {
  margin-top: -7px;
  position: absolute;
  top: 50%;
  left: 10px;
  color: #fff;
}
.cloud.permissions-cloud .cloud-search-wrapper .icon-general-close {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  margin-top: 0;
  margin-top: initial;
  border: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
}
.cloud.permissions-cloud .cloud-search-wrapper .icon-general-close:before {
  content: '\E010';
  color: #fff;
  font-size: 10px;
}
.cloud form {
  flex-shrink: 0;
}
.cloud form:not(.search-form) label.fake-choose-label {
  display: block;
  padding: 7px 10px 5px 31px;
  border-radius: 8px;
  line-height: 1.3em;
}
.cloud form:not(.search-form) label.fake-choose-label:before {
  border-color: #373737;
  top: 9px;
  left: 9px;
  background: none;
  transition: none;
}
.cloud form:not(.search-form) label.fake-choose-label:after {
  top: 13px;
  left: 13px;
}
.cloud form:not(.search-form):hover label {
  background-color: #7800FF;
}
.cloud form:not(.search-form):hover label:before {
  border-color: #fff !important;
}
.cloud form:not(.search-form):hover label,
.cloud form:not(.search-form):hover label figcaption {
  color: #fff !important;
}
.cloud form:not(.search-form):hover input:checked + label.fake-checkbox:before {
  background-color: #fff !important;
}
.cloud form:not(.search-form):hover input:checked + label.fake-checkbox:after {
  color: #7800FF;
}
.cloud form:not(.search-form):hover input:checked + label.fake-radio:before {
  background-color: #7800FF !important;
}
.cloud .search-form {
  position: relative;
}
.cloud .search-form .icon-general-search {
  position: absolute;
  top: 8px;
  left: 9px;
}
.cloud .search-form .icon-general-search:before {
  content: '\E271';
  color: #e6e6e6;
  font-size: 14px;
  margin-left: 1px;
}
.firefox .cloud .search-form .icon-general-search {
  top: 9px;
}
.cloud .search-form .icon-general-close {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  border: none;
  position: absolute;
  top: 8px;
  right: 5px;
  background: none;
}
.cloud .search-form .icon-general-close:before {
  content: '\E010';
  color: #e6e6e6;
  font-size: 10px;
}
.cloud .search-form input[type=text] {
  padding-left: 31px;
}
.cloud .search-form input[type=text]:focus + .icon-general-close {
  opacity: 1;
  visibility: visible;
  transition: all 0.1s ease-out 0s;
}
.cloud .search-form + p,
.cloud .search-form + ul {
  margin-top: 6px;
}
.cloud .user-avatar {
  display: flex;
  width: 100%;
  align-items: center;
}
.cloud .user-avatar > img,
.cloud .user-avatar .initials {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 8px;
  flex-shrink: 0;
}
.cloud .user-avatar > img:not([src*="gravatar.com"])[src$="transparent.png"],
.cloud .user-avatar > img:not([src*="gravatar.com"])[src$="default_avatar.png"],
.cloud .user-avatar > img:not([src*="gravatar.com"])[src$="avatars/default.png"] {
  opacity: 0;
  visibility: hidden;
}
.cloud .user-avatar .initials {
  top: 0;
  left: 0;
  font-size: 10px;
  line-height: 20px;
}
.cloud .user-avatar figcaption {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  position: relative;
  top: 1px;
  line-height: 100%;
}
.cloud .section-name {
  font-size: 10px;
  color: #f3f3f3;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 8px;
}
.cloud .separator {
  display: block;
  position: relative;
  flex-shrink: 0;
}
.cloud .separator:empty:before,
.cloud .separator:empty:after {
  display: none !important;
}
.cloud .separator:before,
.cloud .separator:after {
  content: '';
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #373737;
}
.cloud .separator:not(.bottom):before {
  content: '';
  display: block;
  height: 1px;
  background-color: #373737;
}
.cloud .separator.bottom:after {
  content: '';
  display: block;
  height: 1px;
  background-color: #373737;
}
.cloud .separator.more-spacing:before {
  margin-bottom: 11px;
}
.cloud .separator.more-spacing:after {
  margin-top: 11px;
}
.cloud .option-description {
  color: #919191;
  font-size: 12px;
}
.cloud .options-separator {
  margin: 6px 0;
  pointer-events: none;
  overflow: hidden;
}
.cloud .options-separator:first-of-type {
  margin-top: 0 !important;
}
.tall.cloud .options-separator {
  margin-top: 3px;
  margin-bottom: 3px;
}
.cloud .options-separator .section-name {
  margin-bottom: 0;
  padding: 0 10px;
  position: relative;
  font-style: normal;
  line-height: 12px;
  color: #919191;
}
.cloud .options-separator .section-name:before,
.cloud .options-separator .section-name:after {
  content: '';
  width: 5000px;
  height: 1px;
  position: absolute;
  top: 4px;
  background: #414141;
}
.cloud .options-separator .section-name:before {
  right: 100%;
}
.cloud .options-separator .section-name:after {
  left: 100%;
}
.cloud .item-separator {
  position: relative;
}
.cloud .item-separator:before {
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  background: #373737;
}
.cloud .item-separator.left {
  padding-left: 1px;
}
.cloud .item-separator.left:before {
  left: 0;
}
.cloud .item-separator.right {
  padding: 1px;
}
.cloud .item-separator.right:before {
  right: 0;
}
.cloud .no-found {
  color: rgba(230, 230, 230, 0.4);
  text-align: center;
}
.cloud .tooltip,
.cloud .tooltip a {
  font-size: 12px !important;
}
.cloud .tooltip span,
.cloud .tooltip a span {
  font-size: inherit !important;
}
.cloud ~ .hulk-select-list li.selected {
  pointer-events: auto;
}
.cloud .old-input {
  border-color: rgba(243, 243, 243, 0.2) !important;
  color: #dadada !important;
}
.cloud .old-input::-moz-placeholder {
  color: rgba(218, 218, 218, 0.4) !important;
}
.cloud .old-input::placeholder {
  color: rgba(218, 218, 218, 0.4) !important;
}
.cloud .old-input:active,
.cloud .old-input:focus {
  border-color: rgba(243, 243, 243, 0.3) !important;
}
.cloud .cloud-header {
  padding-bottom: 16px;
}
.options-cloud.cloud .cloud-header {
  padding-top: 12px;
  padding-right: 20px;
  padding-left: 20px;
}
.cloud .cloud-header .cloud-headline {
  margin-bottom: 15px;
  color: #fff;
  font-weight: 600;
}
.cloud .full-width-footer {
  display: flex;
  height: 30px;
  padding-right: 19px;
  padding-left: 19px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  align-items: center;
  flex-shrink: 0;
  background-color: #111111;
  font-size: 12px;
}
.cloud-with-settings.cloud .full-width-footer {
  background-color: #f3f3f3;
}
.dark-version .cloud-with-settings.cloud .full-width-footer {
  background-color: #111111;
}
.cloud .sub-cloud {
  width: auto;
  top: -8px;
  left: 100%;
  z-index: 1;
}
.cloud .info-label {
  font-size: 12px;
  line-height: 16px;
}
input,
label {
  font-size: 16px;
}
input {
  height: 50px;
  padding: 0 15px 0 20px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-size: 16px;
}
input::-moz-placeholder {
  opacity: 0;
  color: transparent;
  font-family: 'ProximaNova', sans-serif;
}
input::placeholder {
  opacity: 0;
  color: transparent;
  font-family: 'ProximaNova', sans-serif;
}
input[type='text'],
input[type='password'],
input[type='email'] {
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus {
  border-color: #7800FF;
}
input.not-valid {
  border: 1px solid #e20c00;
}
input.state-helper {
  width: 0;
  height: 0;
  visibility: hidden;
}
input.state-helper:checked + .fake-choose-label.fake-checkbox:before,
input.state-helper:checked + .fake-choose-label.fake-radio:before {
  box-shadow: none;
}
input.state-helper:checked + .fake-choose-label.fake-checkbox:before {
  border-color: #7800FF;
  background: #7800FF;
}
input.state-helper:checked + .fake-choose-label.fake-checkbox:after {
  opacity: 1;
}
input.state-helper:checked + .fake-choose-label.fake-radio:before {
  border-width: 5px;
  border-color: #7800FF;
  background: #fff;
}
input.state-helper:checked:disabled + .fake-choose-label.fake-checkbox:before {
  border-color: #cdcdcd;
  background: #cdcdcd;
}
input.state-helper:checked:disabled + .fake-choose-label.fake-radio:before {
  border-color: #cdcdcd;
}
label {
  color: #a6a6a6;
}
label.fake-choose-label {
  display: none;
  margin-bottom: 0;
  padding-left: 18px;
  position: relative;
  color: #6a6a6a;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
label.fake-choose-label:hover:before {
  border-color: #b3b3b3;
}
label.fake-choose-label:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #cdcdcd;
  border-radius: 8px;
  position: absolute;
  top: -1px;
  left: 0;
  background: #fff;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}
label.fake-choose-label.fake-radio:before {
  border-radius: 50%;
  transition: border-color 0.1s ease-out;
}
label.fake-choose-label.fake-radio:after {
  width: 100%;
  background: #7800FF;
}
label.fake-choose-label.fake-checkbox:before {
  transition: background-color 0.1s ease-out, border-color 0.1s ease-out;
}
label.fake-choose-label.fake-checkbox:after {
  text-align: center;
  font-family: 'UXPin-Homepage-20';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e901";
  color: inherit;
  font-size: 4px;
  opacity: 0;
  position: absolute;
  top: 3px;
  left: 3px;
  color: #fff;
  transition: opacity 0.1s ease-out;
}
.breadcrumbs {
  display: flex;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 736px) {
  .breadcrumbs {
    display: none;
  }
}
.breadcrumbs li {
  position: relative;
  color: #fff;
  font-size: 16px;
  list-style: none;
}
.breadcrumbs li:not(:last-child) {
  margin-right: 21px;
}
.breadcrumbs li:not(:last-child):after {
  content: '/';
  position: absolute;
  top: 1px;
  right: -13px;
  color: #6a6a6a;
  pointer-events: none;
}
.breadcrumbs li.active {
  color: #6a6a6a;
}
.breadcrumbs li a {
  color: inherit;
  position: relative;
}
.breadcrumbs li a:after {
  content: '';
  border-bottom: 1px solid #fff;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.breadcrumbs li a:after {
  opacity: 0;
}
.breadcrumbs li a:hover:after {
  opacity: 0.5;
}
.legal-note {
  font-size: 12px;
  line-height: 16px;
  display: block;
  width: 100%;
  margin-top: 20px;
  color: #919191;
  text-align: center;
}
.legal-note.gated-content {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}
.legal-note a {
  color: inherit;
  text-decoration: none;
  position: relative;
}
.legal-note a:after {
  content: '';
  border-bottom: 1px solid #919191;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.legal-note a:hover:after {
  opacity: 0;
}
.top-bar {
  display: flex;
  position: absolute;
  top: 28px;
  right: 0;
  left: 0;
  z-index: 7;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.3s ease;
}
@media screen and (max-width: 1024px) {
  .top-bar {
    top: 20px;
  }
}
@media screen and (max-width: 800px) {
  .top-bar {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 736px) {
  .top-bar {
    padding: 12px 0 0 0;
    position: relative;
    top: 0;
    justify-content: flex-start;
  }
}
.top-bar .logo {
  width: 64px;
  height: 64px;
  margin-right: 40px;
  border-color: rgba(172, 172, 172, 0.6);
  flex-shrink: 0;
  background-size: 64px 64px;
}
@media screen and (max-width: 800px) {
  .top-bar .logo {
    margin-right: 0;
  }
}
@media screen and (max-width: 736px) {
  .top-bar .logo {
    margin-top: 20px;
  }
}
:not(.white).top-bar .logo {
  opacity: 0.9;
  background-image: url('/images/homepage/uxpin-black.svg');
}
.white.top-bar .logo {
  border-color: #fff;
}
.top-bar .main-nav {
  width: 100%;
  max-width: 872px;
}
.top-bar .main-nav > ul {
  display: flex;
}
@media screen and (max-width: 1024px) {
  .top-bar .main-nav > ul {
    justify-content: space-between;
  }
}
@media screen and (max-width: 800px) {
  .top-bar .main-nav > ul {
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 736px) {
  .top-bar .main-nav > ul {
    display: block;
    margin-bottom: 0;
    text-align: center;
  }
}
.top-bar .main-nav > ul > li {
  position: relative;
  font-size: 16px;
}
@media screen and (max-width: 800px) {
  .top-bar .main-nav > ul > li {
    font-size: 12px;
  }
  .top-bar .main-nav > ul > li[data-show-node='cloud'] {
    padding: 10px;
    line-height: 1;
  }
}
@media screen and (max-width: 736px) {
  .top-bar .main-nav > ul > li {
    display: inline-block;
    margin-right: 0;
    margin-left: 0;
  }
  .top-bar .main-nav > ul > li.visible .cloud {
    display: block !important;
  }
  .top-bar .main-nav > ul > li .cloud {
    display: none !important;
  }
}
.top-bar .main-nav > ul > li:not(:first-child) {
  margin-left: 61px;
}
@media screen and (max-width: 850px) {
  .top-bar .main-nav > ul > li:not(:first-child) {
    margin-left: 0;
  }
}
@media screen and (max-width: 736px) {
  .top-bar .main-nav > ul > li:nth-last-child(2) {
    display: none;
  }
}
@media screen and (min-width: 851px) {
  .top-bar .main-nav > ul > li.log-in-link {
    margin-left: auto;
  }
}
@media screen and (max-width: 736px) {
  .top-bar .main-nav > ul > li.log-in-link {
    display: none;
  }
}
@media screen and (max-width: 736px) {
  .top-bar .main-nav > ul > li.resources .cloud {
    right: 0;
  }
  .top-bar .main-nav > ul > li.resources .cloud:before {
    right: 15px;
    left: auto;
  }
}
.top-bar .main-nav > ul > li > a,
.top-bar .main-nav > ul > li > span {
  color: #373737;
}
.white.top-bar .main-nav > ul > li > a,
.white.top-bar .main-nav > ul > li > span {
  color: #fff;
}
.top-bar .main-nav > ul > li > a.selected,
.top-bar .main-nav > ul > li > span.selected,
.top-bar .main-nav > ul > li > a:hover,
.top-bar .main-nav > ul > li > span:hover {
  color: #a6a6a6;
}
.white.top-bar .main-nav > ul > li > a.selected,
.white.top-bar .main-nav > ul > li > span.selected,
.white.top-bar .main-nav > ul > li > a:hover,
.white.top-bar .main-nav > ul > li > span:hover {
  color: #919191;
}
@media screen and (max-width: 800px) {
  .top-bar .main-nav > ul > li > a {
    padding: 10px;
  }
}
.top-bar .main-nav > ul > li > span {
  cursor: default;
}
@media screen and (max-width: 800px) {
  .top-bar .main-nav > ul > li > span {
    margin-right: 13px;
    position: relative;
  }
}
.top-bar .main-nav > ul > li > span:before,
.top-bar .main-nav > ul > li > span:after {
  content: '';
  position: absolute;
}
.top-bar .main-nav > ul > li > span:before {
  width: 18px;
  height: 100%;
  top: 0;
  right: -18px;
  pointer-events: auto;
}
@media screen and (max-width: 800px) {
  .top-bar .main-nav > ul > li > span:before {
    right: -14px;
  }
}
@media screen and (max-width: 736px) {
  .top-bar .main-nav > ul > li > span:before {
    width: 12px;
    top: -1px;
    right: -12px;
  }
}
.top-bar .main-nav > ul > li > span:after {
  width: 6px;
  height: 6px;
  border: 1px solid #373737;
  border-width: 0 0 1px 1px;
  top: 7px;
  right: -17px;
  transform: rotate(-45deg);
  pointer-events: none;
}
@media screen and (max-width: 800px) {
  .top-bar .main-nav > ul > li > span:after {
    top: 0;
    right: -13px;
  }
}
@media screen and (max-width: 736px) {
  .top-bar .main-nav > ul > li > span:after {
    top: 1px;
    transform: rotate(-45deg) scale(0.8);
  }
}
.white.top-bar .main-nav > ul > li > span:after {
  border-color: #fff;
}
.top-bar .main-nav .cloud {
  width: 210px;
  margin-top: 6px;
  z-index: 2;
}
@media screen and (max-width: 736px) {
  .top-bar .main-nav .cloud {
    width: 170px;
  }
}
.top-bar .main-nav .cloud:after {
  content: '';
  height: 6px;
  position: absolute;
  top: -6px;
  right: 0;
  left: 0;
}
.top-bar .main-nav .cloud a {
  text-align: left;
}
.top-bar .main-nav .cloud a:before,
.top-bar .main-nav .cloud a:after {
  display: none;
}
.main-section {
  display: flex;
  height: 100vh;
  position: relative;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(19, 19, 19, 0.85);
  color: #fff;
  text-align: center;
  overflow: hidden;
  transition: background 0.2s ease-out;
}
@media screen and (max-width: 800px) {
  .main-section {
    padding-top: 148px;
  }
}
@media screen and (max-width: 736px) {
  .main-section {
    height: calc(100vh - 69px);
    min-height: 410px;
    padding-top: 44px;
    padding-bottom: 10px;
  }
}
.main-section .background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .main-section .background:before {
    content: '';
    width: 100vw;
    height: calc(100vh - 69px);
    position: absolute;
    top: 0;
    left: 0;
    background: url('./images/homepage/poster-design-systems.png') no-repeat top center;
    background-size: cover;
  }
}
@media screen and (max-width: 736px) {
  .main-section .background {
    top: -121px;
  }
}
.main-section .background video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
}
@media (max-width: 800px) {
  .main-section .background video {
    display: none;
  }
}
.main-section .heading {
  margin-bottom: 10.69vh;
}
@media screen and (max-width: 736px) {
  .main-section .heading {
    margin-bottom: 0;
    position: absolute;
    top: calc(50% - 60px);
    right: 0;
    left: 0;
    transform: translateY(-50%);
  }
  .main-section .heading:before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 23px auto;
    border: 1px solid #fff;
    background: url('./images/homepage/uxpin-white.svg') no-repeat;
    background-size: 64px 64px;
  }
}
.main-section .heading .title {
  margin-bottom: 2.79vh;
}
@media screen and (max-width: 1280px) {
  .main-section .heading .title {
    font-size: 48px;
  }
}
@media screen and (max-width: 800px) {
  .main-section .heading .title {
    font-size: 42px;
  }
}
@media screen and (max-width: 736px) {
  .main-section .heading .title {
    font-size: 30px;
  }
}
.main-section .heading .subtitle {
  font-size: 26px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 736px) {
  .main-section .heading .subtitle {
    font-size: 16px;
  }
}
@media (max-width: 736px) {
  .main-section .btn-sign-up {
    position: absolute;
    top: calc(50% + 80px);
  }
}
@media screen and (max-width: 736px) {
  .main-section .sign-up-form {
    width: auto;
    max-width: 443px;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    right: 10px;
    bottom: 70px;
    left: 10px;
  }
}
@media screen and (max-width: 736px) {
  .main-section .signup-legal-note {
    width: auto;
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
  }
}
.main-footer {
  padding-top: 102px;
  position: relative;
}
@media screen and (max-width: 1280px) {
  .main-footer {
    padding-top: 82px;
  }
}
@media screen and (max-width: 800px) {
  .main-footer {
    padding-top: 71px;
  }
}
@media screen and (max-width: 736px) {
  .main-footer {
    padding-top: 20px;
  }
}
.main-footer:after {
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  background: #373737;
  pointer-events: none;
}
.main-footer a {
  color: rgba(255, 255, 255, 0.8);
  position: relative;
}
.main-footer a:after {
  content: '';
  border-bottom: 1px solid #fff;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.main-footer a:after {
  opacity: 0;
}
.main-footer a:hover:after {
  opacity: 0.6;
}
.main-footer .sitemap {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
@media screen and (max-width: 736px) {
  .main-footer .sitemap {
    flex-wrap: wrap;
  }
}
.main-footer .sitemap .nav {
  display: flex;
  margin-right: 10px;
  flex-direction: column;
  font-size: 12px;
}
@media screen and (max-width: 736px) {
  .main-footer .sitemap .nav {
    width: 50%;
    max-width: 50%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .main-footer .sitemap .nav:nth-of-type(even) {
    padding-left: 20px;
  }
}
.main-footer .sitemap .nav:first-of-type {
  margin-left: 0;
}
.main-footer .sitemap .nav:last-of-type {
  margin-right: 0;
}
.main-footer .sitemap .nav .title {
  margin-bottom: 21px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.33em;
  text-transform: uppercase;
}
@media screen and (max-width: 1280px) {
  .main-footer .sitemap .nav .title {
    margin-bottom: 17px;
  }
}
@media screen and (max-width: 800px) {
  .main-footer .sitemap .nav .title {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 736px) {
  .main-footer .sitemap .nav .title {
    padding-top: 10px;
  }
}
.main-footer .sitemap .nav dd {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
@media screen and (max-width: 736px) {
  .main-footer .sitemap .nav dd {
    margin-bottom: 3px;
  }
}
.main-footer .sitemap .nav dd:last-of-type {
  margin-bottom: 0;
}
.main-footer .sitemap .nav dd .with-badge:before {
  content: 'we\'re hiring';
  display: inline-block;
  width: 58px;
  height: 14px;
  margin-right: -5px;
  padding: 0 4px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  right: -58px;
  font-size: 8px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  text-transform: uppercase;
}
.main-footer .sitemap .nav dd .with-badge.hiring:before {
  padding: 0;
  background-color: #bf9768;
  color: #fff;
}
.main-footer .additional-info {
  display: flex;
  padding: 76px 0 36px;
  align-items: center;
  flex-flow: column;
  flex-wrap: wrap;
  color: rgba(164, 181, 192, 0.53);
  font-size: 12px;
}
@media screen and (max-width: 1280px) {
  .main-footer .additional-info {
    padding-top: 61px;
    padding-bottom: 29px;
  }
}
@media screen and (max-width: 800px) {
  .main-footer .additional-info {
    padding-top: 53px;
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 736px) {
  .main-footer .additional-info {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.main-footer .additional-info .logo-wrapper {
  margin-bottom: 35px;
  cursor: pointer;
}
@media screen and (max-width: 736px) {
  .main-footer .additional-info .logo-wrapper {
    margin-bottom: 25px;
  }
}
.main-footer .additional-info .logo-wrapper:after {
  display: none;
}
.main-footer .additional-info .logo {
  opacity: 0.3;
  width: 66px;
  height: 66px;
  background-size: 66px;
}
.main-footer .additional-info ul {
  margin: auto;
}
.main-footer .additional-info ul,
.main-footer .additional-info ul a {
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}
.main-footer .additional-info ul a {
  position: relative;
}
.main-footer .additional-info ul a:after {
  content: '';
  border-bottom: 1px solid #fff;
  bottom: 0;
  left: 0;
  opacity: 0.15;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.main-footer .additional-info ul a:after {
  opacity: 0;
}
.main-footer .additional-info ul a:hover:after {
  opacity: 0.15;
}
.main-footer .additional-info ul li {
  padding-left: 5px;
  float: left;
}
.main-footer .additional-info ul li:first-of-type {
  padding: 0;
}
.main-footer .additional-info ul li:first-of-type:before {
  display: none;
}
.main-footer .additional-info ul li:before {
  content: '\2022';
  padding-right: 5px;
}
.main-header {
  display: flex;
  height: 509px;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
.main-header.small-size {
  height: 409px;
}
@media screen and (max-width: 1280px) {
  .main-header {
    height: 460px;
  }
  .main-header.small-size {
    height: 360px;
  }
}
@media screen and (max-width: 736px) {
  .main-header {
    height: auto !important;
    margin-top: -128px;
    padding-top: 128px;
    padding-bottom: 30px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }
}
.main-header:before {
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  pointer-events: none;
}
.uxpin-systems.main-header:before,
.uxpin-systems-modular.main-header:before {
  background-image: url('/images/homepage/product-tour/uxpin-systems/header-bg.jpg');
}
@media  {
  .uxpin-systems.main-header:before,
  .uxpin-systems-modular.main-header:before {
    background-image: url('/images/homepage/product-tour/uxpin-systems/header-bg@2x.jpg');
  }
}
.uxpin-systems-developer.main-header:before {
  background-image: url('/images/homepage/product-tour/uxpin-systems/header-dev-bg.jpg');
}
@media  {
  .uxpin-systems-developer.main-header:before {
    background-image: url('/images/homepage/product-tour/uxpin-systems/header-dev-bg@2x.jpg');
  }
}
.uxpin-systems-design.main-header:before {
  background-image: url('/images/homepage/product-tour/uxpin-systems/header-design-bg.jpg');
}
@media  {
  .uxpin-systems-design.main-header:before {
    background-image: url('/images/homepage/product-tour/uxpin-systems/header-design-bg@2x.jpg');
  }
}
.uxpin-prototyping.main-header:before {
  background-image: url('/images/homepage/product-tour/uxpin-prototyping/header-bg.jpg');
}
@media  {
  .uxpin-prototyping.main-header:before {
    background-image: url('/images/homepage/product-tour/uxpin-prototyping/header-bg@2x.jpg');
  }
}
.website-prototyping-tools.main-header:before {
  background-image: url('/images/homepage/product-tour/website-prototyping-tools/header-bg.jpg');
}
@media  {
  .website-prototyping-tools.main-header:before {
    background-image: url('/images/homepage/product-tour/website-prototyping-tools/header-bg@2x.jpg');
  }
}
.main-header .breadcrumbs {
  position: absolute;
  top: 144px;
  left: 20px;
}
@media screen and (max-width: 736px) {
  .main-header .breadcrumbs {
    left: 10px;
  }
}
.main-header .breadcrumbs + .heading-major {
  padding-top: 80px;
}
@media screen and (max-width: 736px) {
  .main-header .breadcrumbs + .heading-major {
    padding-top: 20px;
  }
}
.main-header .heading-major {
  padding-top: 103px;
  flex-basis: 50%;
}
@media screen and (max-width: 1280px) {
  .main-header .heading-major {
    padding-top: 82px;
  }
}
@media screen and (max-width: 736px) {
  .main-header .heading-major {
    width: 100%;
    padding-top: 20px;
    flex-basis: 100%;
    text-align: center;
  }
}
.main-header .heading-major.aligned-center-type {
  padding-top: 0;
  flex-basis: 100%;
  text-align: center;
}
.main-header .heading-major .title {
  padding-top: 5px;
  color: #fff;
  letter-spacing: -0.7px;
}
.main-header .heading-major .title-jp {
  line-height: 72px;
}
@media screen and (max-width: 1280px) {
  .main-header .heading-major .title {
    font-size: 48px;
    letter-spacing: -0.56px;
  }
}
@media screen and (max-width: 800px) {
  .main-header .heading-major .title {
    font-size: 42px;
    letter-spacing: -0.49px;
  }
}
@media screen and (max-width: 736px) {
  .main-header .heading-major .title {
    padding-top: 0;
    font-size: 30px;
    letter-spacing: -0.35px;
  }
}
.main-header .heading-major .title:not(:only-child) {
  margin-bottom: 17px;
}
@media screen and (max-width: 736px) {
  .main-header .heading-major .title:not(:only-child) {
    margin-bottom: 7px;
  }
}
.transparent-style.main-header .heading-major .title {
  color: #373737;
}
.main-header .heading-major .subtitle {
  margin-top: 19px;
  padding-left: 2px;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
}
.main-header .heading-major .subtitle:not(:last-child) {
  margin-bottom: 36px;
}
@media screen and (max-width: 1280px) {
  .main-header .heading-major .subtitle {
    margin-top: 15px;
    font-size: 18px;
  }
}
@media screen and (max-width: 736px) {
  .main-header .heading-major .subtitle {
    margin-top: 10px;
    font-size: 16px;
  }
}
.main-header .heading-major .btn-solid {
  max-width: 136px;
  margin-top: 35px;
  margin-left: 4px;
}
@media screen and (max-width: 1280px) {
  .main-header .heading-major .btn-solid {
    margin-top: 28px;
  }
}
@media screen and (max-width: 800px) {
  .main-header .heading-major .btn-solid {
    margin-top: 25px;
  }
}
@media screen and (max-width: 736px) {
  .main-header .heading-major .btn-solid {
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
  }
}
.main-header .form {
  display: flex;
  margin-right: -4px;
  padding-top: 103px;
  align-items: center;
  flex-direction: column;
  flex-basis: 505px;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 1280px) {
  .main-header .form {
    padding-top: 84px;
  }
}
@media screen and (max-width: 1024px) {
  .main-header .form {
    padding-top: 45px !important;
  }
}
@media screen and (max-width: 736px) {
  .main-header .form {
    width: 100%;
    padding-top: 20px !important;
    flex-basis: 100%;
  }
}
.main-header .form .heading {
  margin-bottom: 16px;
}
.main-header .form .heading .title {
  margin-bottom: 2px;
  font-size: 32px;
  font-weight: 300;
}
@media screen and (max-width: 1280px) {
  .main-header .form .heading .title {
    margin-bottom: 16px;
    font-size: 26px;
  }
}
@media screen and (max-width: 800px) {
  .main-header .form .heading .title {
    margin-bottom: 14px;
    font-size: 22px;
  }
}
@media screen and (max-width: 736px) {
  .main-header .form .heading .title {
    margin-bottom: 10px;
    font-size: 18px;
  }
}
.main-header .form .additional-info {
  display: block;
  margin-top: 14px;
  color: #8f8f8f;
  font-size: 12px;
  font-weight: 400;
}
.main-header .testimonials {
  margin-top: 0;
  padding-top: 247px !important;
  flex-basis: 490px;
  justify-content: space-between;
  color: #fff;
  text-align: left;
}
@media screen and (max-width: 1280px) {
  .main-header .testimonials {
    padding-top: 198px !important;
  }
}
@media screen and (max-width: 800px) {
  .main-header .testimonials {
    padding-top: 173px !important;
  }
}
@media screen and (max-width: 736px) {
  .main-header .testimonials {
    display: none !important;
  }
}
.main-header .testimonials .quote.icon-20-quotation-mark:before {
  color: #5e5e5e !important;
}
.main-header .content {
  padding-top: 127px;
  padding-left: 20px;
  flex-basis: 605px;
  color: #fff;
  font-size: 18px;
  line-height: 30px;
}
@media screen and (max-width: 1280px) {
  .main-header .content {
    flex-basis: 484px;
    font-size: 16px;
    line-height: 27px;
  }
}
@media screen and (max-width: 736px) {
  .main-header .content {
    display: none;
  }
}
.main-header .content p {
  margin-bottom: 28px;
}
.main-header .content p:last-child {
  margin-bottom: 0;
}
.sign-up-form {
  display: flex;
  width: 100%;
  max-width: 460px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sign-up-form .title {
  width: 100%;
  margin-bottom: 2.3vh;
  font-size: 20px;
  font-weight: 400;
}
@media screen and (max-width: 736px) {
  .sign-up-form .title {
    font-size: 16px;
  }
}
.sign-up-form .input-wrapper {
  margin-right: 10px;
  position: relative;
  flex-grow: 1;
}
@media screen and (max-width: 736px) {
  .sign-up-form .input-wrapper {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.sign-up-form label {
  display: block;
  padding: 0 10px;
  position: absolute;
  top: 2px;
  left: 0;
  transform: translate3d(5px, 11px, 0);
  pointer-events: none;
  transition: transform 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}
.sign-up-form input[type='email'] {
  width: 100%;
  padding-left: 14px;
}
.sign-up-form input[type='email']:focus + label,
.sign-up-form input[type='email'].with-value + label {
  transform: translate(9px, 1px) scale(0.625);
}
.sign-up-form input[type='email'] + label {
  transform-origin: top left;
}
.sign-up-form .btn-solid {
  min-width: 136px;
}
@media screen and (max-width: 736px) {
  .sign-up-form .btn-solid {
    width: 100%;
  }
}
.sign-up-form .btn-solid.inactive {
  background-color: #7800FF;
  color: rgba(255, 255, 255, 0.7);
}
.sign-up-form .btn-solid.inactive.white {
  background-color: #fff;
  color: rgba(120, 0, 255, 0.7);
}
.sign-up-form .error-tip {
  margin-top: -3px;
  position: relative;
  z-index: 1;
  font-size: 12px;
  text-align: left;
}
.sign-up-form .error-tip span {
  display: block;
  width: 100%;
  padding: 3px 10px;
  border-radius: 0 0 2px 2px;
  position: absolute;
  top: 0;
  background: #ff3b30;
  color: #fff;
}
.sign-up-form .error-tip a {
  color: #fff;
  font-weight: 800;
  position: relative;
}
.sign-up-form .error-tip a:after {
  content: '';
  border-bottom: 1px solid #fff;
  bottom: 0;
  left: 0;
  opacity: 0.3;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.sign-up-form .error-tip a:hover:after {
  opacity: 0;
}
.signup-legal-note {
  font-size: 12px;
  line-height: 16px;
  display: block;
  width: 100%;
  margin-top: 14px;
  color: #a6a6a6;
  text-align: center;
}
.signup-legal-note a {
  color: inherit;
  position: relative;
}
.signup-legal-note a:after {
  content: '';
  border-bottom: 1px solid #a6a6a6;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.signup-legal-note a:hover:after {
  opacity: 0;
}
.banners {
  margin-bottom: 17px;
  padding-top: 67px;
  padding-bottom: 80px;
}
@media screen and (max-width: 1280px) {
  .banners {
    padding-top: 54px;
  }
}
@media screen and (max-width: 736px) {
  .banners {
    padding-top: 15px;
    padding-bottom: 0;
  }
}
.banners .heading-minor {
  margin-bottom: 29px;
}
@media screen and (max-width: 1280px) {
  .banners .heading-minor {
    margin-bottom: 23px;
  }
}
@media screen and (max-width: 1024px) {
  .banners .heading-minor {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 736px) {
  .banners .heading-minor {
    margin-bottom: 10px;
  }
}
.banners ul {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}
@media screen and (max-width: 736px) {
  .banners ul {
    width: calc(100% + 10px);
    margin-left: -10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.banners .banner {
  margin-right: 10px;
  margin-left: 10px;
  align-items: center;
  background-color: #b5bbc2;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -9999px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
@media screen and (max-width: 736px) {
  .banners .banner {
    width: calc(25% - 10px * 2) !important;
    margin: 5px 10px !important;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner {
    background-repeat: no-repeat;
    background-position: center center;
  }
}
.banners .banner:first-child {
  margin-left: 0;
}
.banners .banner:last-child {
  margin-right: 0;
}
.banners .banner.trowe {
  width: 123px;
  height: 19px;
  -webkit-mask-image: url('/images/homepage/pricing/trowe.svg');
          mask-image: url('/images/homepage/pricing/trowe.svg');
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner.trowe {
    background-image: url('/images/homepage/pricing/trowe.svg');
  }
}
@media screen and (max-width: 736px) {
  .banners .banner.trowe {
    height: 18px;
    order: 1;
  }
}
.banners .banner.hbo {
  width: 64px;
  height: 27px;
  -webkit-mask-image: url('/images/homepage/pricing/hbo.svg');
          mask-image: url('/images/homepage/pricing/hbo.svg');
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner.hbo {
    background-image: url('/images/homepage/pricing/hbo.svg');
  }
}
@media screen and (max-width: 736px) {
  .banners .banner.hbo {
    height: 18px;
    order: 1;
  }
}
.banners .banner.paypal {
  width: 107px;
  height: 27px;
  -webkit-mask-image: url('/images/homepage/pricing/paypal.svg');
          mask-image: url('/images/homepage/pricing/paypal.svg');
}
@media screen and (max-width: 736px) {
  .banners .banner.paypal {
    order: 2;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner.paypal {
    background-image: url('/images/homepage/pricing/paypal.svg');
  }
}
.banners .banner.sapient {
  width: 95px;
  height: 35px;
  -webkit-mask-image: url('/images/homepage/pricing/sapient.svg');
          mask-image: url('/images/homepage/pricing/sapient.svg');
}
@media screen and (max-width: 736px) {
  .banners .banner.sapient {
    order: 3;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner.sapient {
    background-image: url('/images/homepage/pricing/sapient.svg');
  }
}
.banners .banner.autodesk {
  width: 119px;
  height: 21px;
  -webkit-mask-image: url('/images/homepage/pricing/autodesk.svg');
          mask-image: url('/images/homepage/pricing/autodesk.svg');
}
@media screen and (max-width: 736px) {
  .banners .banner.autodesk {
    order: 5;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner.autodesk {
    background-image: url('/images/homepage/pricing/autodesk.svg');
  }
}
.banners .banner.netflix {
  width: 82px;
  height: 22px;
  -webkit-mask-image: url('/images/homepage/pricing/netflix.svg');
          mask-image: url('/images/homepage/pricing/netflix.svg');
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner.netflix {
    background-image: url('/images/homepage/pricing/netflix.svg');
  }
}
@media screen and (max-width: 736px) {
  .banners .banner.netflix {
    height: 20px;
    order: 4;
  }
}
.banners .banner.microsoft {
  width: 114px;
  height: 24px;
  -webkit-mask-image: url('/images/homepage/pricing/microsoft.svg');
          mask-image: url('/images/homepage/pricing/microsoft.svg');
}
@media screen and (max-width: 736px) {
  .banners .banner.microsoft {
    order: 6;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner.microsoft {
    background-image: url('/images/homepage/pricing/microsoft.svg');
  }
}
.banners .banner.sony {
  width: 84px;
  height: 15px;
  -webkit-mask-image: url('/images/homepage/pricing/sony.svg');
          mask-image: url('/images/homepage/pricing/sony.svg');
}
@media screen and (max-width: 736px) {
  .banners .banner.sony {
    height: 13px;
    order: 7;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .banners .banner.sony {
    background-image: url('/images/homepage/pricing/sony.svg');
  }
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.content.two-col-view {
  justify-content: space-between;
}
.content .heading-major {
  width: 100%;
}
.content .heading-major .title {
  margin-bottom: 71px;
  color: inherit;
  font-size: 42px;
  font-weight: 300;
  text-align: left;
}
@media screen and (max-width: 1280px) {
  .content .heading-major .title {
    margin-bottom: 58px;
    font-size: 34px;
  }
}
@media screen and (max-width: 800px) {
  .content .heading-major .title {
    margin-bottom: 50px;
    font-size: 32px;
  }
}
@media screen and (max-width: 736px) {
  .content .heading-major .title {
    margin-bottom: 20px;
    font-size: 24px;
  }
}
.content .heading .title {
  margin-bottom: 21px;
  color: inherit;
  font-size: 42px;
  font-weight: 700;
}
.content .heading .title.light {
  font-weight: 300;
}
.homepage .content .heading .title {
  color: #373737;
}
@media screen and (max-width: 1280px) {
  .content .heading .title {
    margin-bottom: 17px;
    font-size: 34px;
  }
}
@media screen and (max-width: 800px) {
  .content .heading .title {
    margin-bottom: 15px;
    font-size: 24px;
  }
}
@media screen and (max-width: 736px) {
  .content .heading .title {
    margin-bottom: 13px;
  }
}
.content .heading .title .additional {
  margin-left: 10px;
  color: #ff8e00;
  font-size: 20px;
  font-weight: 400;
  line-height: 0;
}
@media screen and (max-width: 1280px) {
  .content .heading .title .additional {
    margin-left: 8px;
    font-size: 16px;
  }
}
@media screen and (max-width: 800px) {
  .content .heading .title .additional {
    margin-left: 5px;
    font-size: 14px;
  }
}
@media screen and (max-width: 736px) {
  .content .heading .title .additional {
    display: block;
    margin-top: 6px;
    line-height: 100%;
  }
}
.content .section {
  width: 100%;
}
.two-col-view.content .section {
  width: calc(50% - 63px);
  font-size: 20px;
  line-height: 24px;
}
@media screen and (max-width: 1280px) {
  .two-col-view.content .section {
    width: calc(50% - 50px);
    font-size: 18px;
    line-height: 22px;
  }
}
@media screen and (max-width: 800px) {
  .two-col-view.content .section {
    width: calc(50% - 44px);
  }
}
@media screen and (max-width: 736px) {
  .two-col-view.content .section {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center;
  }
  .two-col-view.content .section:not(:last-child) {
    margin-bottom: 54px;
  }
}
.two-col-view.content .section p {
  margin-bottom: 48px;
}
@media screen and (max-width: 1280px) {
  .two-col-view.content .section p {
    margin-bottom: 38px;
  }
}
@media screen and (max-width: 800px) {
  .two-col-view.content .section p {
    margin-bottom: 34px;
  }
}
@media screen and (max-width: 736px) {
  .two-col-view.content .section p {
    margin-bottom: 22px;
  }
}
.two-col-view.content .section .list {
  margin-bottom: 40px;
  text-align: left;
}
@media (max-width: 1280px) {
  .two-col-view.content .section .list {
    margin-bottom: 32px;
  }
}
@media (max-width: 800px) {
  .two-col-view.content .section .list {
    margin-bottom: 28px;
  }
}
@media (max-width: 736px) {
  .two-col-view.content .section .list {
    margin-bottom: 13px;
    padding-right: 20px;
    padding-left: 20px;
  }
}
.alternative-view.content .section {
  display: flex;
  padding-top: 163px;
  padding-bottom: 163px;
  position: relative;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
@media screen and (max-width: 1280px) {
  .alternative-view.content .section {
    padding-top: 131px;
    padding-bottom: 131px;
  }
}
@media screen and (max-width: 800px) {
  .alternative-view.content .section {
    padding-top: 92px;
    padding-bottom: 92px;
  }
}
@media screen and (max-width: 736px) {
  .alternative-view.content .section {
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: flex-start;
    flex-direction: column !important;
  }
}
:not(.one-side).alternative-view.content .section:nth-of-type(odd) {
  flex-direction: row-reverse;
}
:not(.one-side).alternative-view.content .section:nth-of-type(odd) .pic {
  max-width: 42.5%;
}
:not(.one-side).alternative-view.content .section:nth-of-type(odd) .pic img,
:not(.one-side).alternative-view.content .section:nth-of-type(odd) .pic video {
  float: left;
}
.alternative-view.content .section:nth-of-type(even):before,
.alternative-view.content .section.gray:before {
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  background: #f7f7f7;
  pointer-events: none;
}
.alternative-view.content .section:nth-of-type(even) .description,
.alternative-view.content .section.gray .description {
  max-width: 42.6%;
}
.alternative-view.content .section.bottom-pic-type {
  padding-bottom: 0 !important;
}
@media screen and (max-width: 736px) {
  .alternative-view.content .section.bottom-pic-type {
    padding-bottom: 40px !important;
  }
}
.alternative-view.content .section .pic {
  max-width: 43%;
}
@media screen and (max-width: 736px) {
  .alternative-view.content .section .pic {
    max-width: 100% !important;
    margin: 0 auto 20px auto;
  }
}
.alternative-view.content .section .pic.with-shadow img,
.alternative-view.content .section .pic.with-shadow video {
  box-shadow: -1px 92px 99px -62px rgba(0, 0, 0, 0.26), 0 25px 65px 0 rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 736px) {
  .alternative-view.content .section .pic.with-shadow img,
  .alternative-view.content .section .pic.with-shadow video {
    box-shadow: none;
  }
}
.alternative-view.content .section .pic.portrait-shadow-type img,
.alternative-view.content .section .pic.portrait-shadow-type video {
  box-shadow: 0 23px 40px 0 rgba(0, 0, 0, 0.18);
}
.alternative-view.content .section .pic img,
.alternative-view.content .section .pic video {
  float: right;
}
@media screen and (max-width: 736px) {
  .alternative-view.content .section .pic img,
  .alternative-view.content .section .pic video {
    max-width: 100%;
    float: none !important;
  }
}
.alternative-view.content .section .pic video {
  max-width: 750px;
}
.alternative-view.content .section .description {
  max-width: 50%;
}
@media screen and (max-width: 736px) {
  .alternative-view.content .section .description {
    max-width: 100% !important;
    text-align: center;
  }
}
.alternative-view.content .section .description .heading {
  margin-bottom: 29px;
}
@media screen and (max-width: 1280px) {
  .alternative-view.content .section .description .heading {
    margin-bottom: 23px;
  }
}
@media screen and (max-width: 800px) {
  .alternative-view.content .section .description .heading {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 736px) {
  .alternative-view.content .section .description .heading {
    margin-bottom: 15px;
  }
}
.alternative-view.content .section .description .heading + p {
  margin-top: -11px;
}
.alternative-view.content .section .description p {
  color: #6a6a6a;
  font-size: 20px;
  line-height: 30px;
}
.alternative-view.content .section .description p + .list {
  margin-top: 35px;
}
.alternative-view.content .section .description .btn-solid {
  max-width: 182px;
  margin-top: 40px;
}
@media screen and (max-width: 1280px) {
  .alternative-view.content .section .description .btn-solid {
    margin-top: 32px;
  }
}
@media screen and (max-width: 800px) {
  .alternative-view.content .section .description .btn-solid {
    margin-top: 28px;
  }
}
@media screen and (max-width: 736px) {
  .alternative-view.content .section .description .btn-solid {
    width: 100%;
    max-width: none;
    max-width: initial;
    margin-top: 20px;
  }
}
.content .section .illustration {
  margin-bottom: 12px;
}
@media screen and (max-width: 1280px) {
  .content .section .illustration {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 736px) {
  .content .section .illustration {
    margin-top: 0 !important;
  }
  .content .section .illustration img,
  .content .section .illustration video {
    margin-right: auto;
    margin-left: auto;
  }
}
.content .section .illustration.prototyping {
  margin-bottom: 29px;
}
@media screen and (max-width: 1280px) {
  .content .section .illustration.prototyping {
    margin-bottom: 27px;
  }
}
@media screen and (max-width: 736px) {
  .content .section .illustration.prototyping {
    margin-bottom: 18px;
  }
}
.content .section .illustration.design-systems {
  margin-top: -19px;
}
@media screen and (max-width: 736px) {
  .content .section .illustration.design-systems {
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 736px) {
  .content .join {
    padding-right: 0;
    padding-left: 0;
  }
}
.testimonials {
  display: flex;
  margin-top: 132px;
  margin-bottom: 17px;
  padding-bottom: 33px;
  position: relative;
  color: #373737;
}
@media screen and (max-width: 1280px) {
  .testimonials {
    margin-top: 106px;
    margin-bottom: 14px;
    padding-bottom: 26px;
  }
}
@media screen and (max-width: 800px) {
  .testimonials {
    margin-top: 92px;
    margin-bottom: 12px;
    padding-bottom: 23px;
  }
}
@media screen and (max-width: 736px) {
  .testimonials {
    margin-top: 20px;
  }
}
.homepage .testimonials {
  margin-top: 0 !important;
}
.testimonials.with-separator {
  padding-top: 93px;
}
@media screen and (max-width: 1280px) {
  .testimonials.with-separator {
    padding-top: 74px;
  }
}
@media screen and (max-width: 800px) {
  .testimonials.with-separator {
    padding-top: 65px;
  }
}
@media screen and (max-width: 736px) {
  .testimonials.with-separator {
    padding-top: 30px;
  }
}
.testimonials.with-separator:before {
  content: '';
  width: 100vw;
  height: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #f6f6f6;
}
.blue-style .testimonials.with-separator:before {
  background: #881fff;
}
.two-col-view.testimonials .quote-list {
  flex-wrap: wrap;
}
@media screen and (max-width: 1280px) {
  .two-col-view.testimonials .quote-list .column:nth-child(n+2) {
    margin-top: 50px;
  }
}
@media screen and (max-width: 800px) {
  .two-col-view.testimonials .quote-list .column:nth-child(n+2) {
    margin-top: 44px;
  }
}
.testimonials .quote-list,
.testimonials.small {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 736px) {
  .testimonials .quote-list,
  .testimonials.small {
    margin-bottom: 0;
    flex-direction: column;
  }
}
.testimonials .quote-list .column,
.testimonials.small .column {
  display: flex;
  margin-top: 53px;
  flex-basis: 42.8%;
}
@media screen and (max-width: 736px) {
  .testimonials .quote-list .column,
  .testimonials.small .column {
    margin-top: 10px;
    flex-basis: auto;
  }
  .testimonials .quote-list .column:not(:last-child),
  .testimonials.small .column:not(:last-child) {
    margin-bottom: 20px;
  }
}
.testimonials .quote-list .person,
.testimonials.small .person {
  margin-top: 9px;
  margin-right: 0;
  flex-basis: 110px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
}
@media screen and (max-width: 800px) {
  .testimonials .quote-list .person,
  .testimonials.small .person {
    flex-basis: 105px;
  }
}
@media screen and (max-width: 736px) {
  .testimonials .quote-list .person,
  .testimonials.small .person {
    font-size: 12px;
    line-height: 16px;
  }
}
.testimonials .quote-list .person .name,
.testimonials.small .person .name,
.testimonials .quote-list .person .company,
.testimonials.small .person .company {
  display: block;
}
.blue-style .testimonials .quote-list .person .name,
.blue-style .testimonials.small .person .name,
.blue-style .testimonials .quote-list .person .company,
.blue-style .testimonials.small .person .company,
.white.testimonials .quote-list .person .name,
.white.testimonials.small .person .name,
.white.testimonials .quote-list .person .company,
.white.testimonials.small .person .company {
  color: #fff;
}
.testimonials .quote-list .person .name,
.testimonials.small .person .name {
  opacity: 0.75;
  margin-top: 13px;
}
.testimonials .person {
  margin-right: 55px;
}
@media screen and (max-width: 1280px) {
  .testimonials .person {
    margin-right: 44px;
  }
}
@media screen and (max-width: 736px) {
  :not(.two-col-view).testimonials .person {
    margin-right: 24px;
  }
  :not(.two-col-view).testimonials .person img {
    max-width: 70px;
    height: auto;
  }
}
.testimonials .quote {
  max-width: 878px;
  margin-top: 7px;
  position: relative;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.2px;
  line-height: 42px;
}
@media screen and (max-width: 1280px) {
  .testimonials .quote {
    font-size: 26px;
    letter-spacing: -0.16px;
    line-height: 34px;
  }
}
@media screen and (max-width: 736px) {
  .testimonials .quote {
    font-size: 18px;
    letter-spacing: -0.1px;
    line-height: 24px;
  }
}
.testimonials .quote.icon-20-quotation-mark:before {
  content: '\e900';
  position: absolute;
  top: -41px;
  left: -32px;
  z-index: -1;
  color: #f0f3f5;
  font-size: 60px;
  pointer-events: none;
}
@media screen and (max-width: 736px) {
  .testimonials .quote.icon-20-quotation-mark:before {
    top: -15px;
    left: -8px;
    font-size: 30px;
  }
}
.two-col-view.testimonials .quote.icon-20-quotation-mark:before,
.small.testimonials .quote.icon-20-quotation-mark:before {
  content: "\e900";
  color: #ebebeb;
  font-size: 47px;
  width: 47px;
  height: 47px;
  position: absolute;
  top: -14px;
  left: -5px;
}
@media screen and (max-width: 1280px) {
  .testimonials .quote.icon-20-quotation-mark:before,
  .two-col-view.testimonials .quote.icon-20-quotation-mark:before,
  .small.testimonials .quote.icon-20-quotation-mark:before {
    top: -28px;
    left: -22px;
    font-size: 48px;
  }
}
@media screen and (max-width: 736px) {
  .testimonials .quote.icon-20-quotation-mark:before,
  .two-col-view.testimonials .quote.icon-20-quotation-mark:before,
  .small.testimonials .quote.icon-20-quotation-mark:before {
    width: 24px;
    height: 24px;
    top: -5px;
    left: -18px;
    font-size: 24px;
  }
}
@media screen and (max-width: 736px) {
  .two-col-view.testimonials .quote.icon-20-quotation-mark:before,
  .small.testimonials .quote.icon-20-quotation-mark:before {
    width: 24px;
    height: 24px;
    top: -5px;
    left: -18px;
    font-size: 24px;
  }
}
.blue-style .testimonials .quote.icon-20-quotation-mark:before {
  color: #005ede;
}
.two-col-view.testimonials .quote,
.small.testimonials .quote {
  margin-top: 1px;
  padding-left: 20px;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 1280px) {
  .two-col-view.testimonials .quote,
  .small.testimonials .quote {
    font-size: 18px;
    line-height: 27px;
  }
}
@media screen and (max-width: 736px) {
  .two-col-view.testimonials .quote,
  .small.testimonials .quote {
    padding-left: 0;
    font-size: 15px;
    line-height: 24px;
  }
}
.blue-style .two-col-view.testimonials .quote,
.blue-style .small.testimonials .quote,
.white.two-col-view.testimonials .quote,
.white.small.testimonials .quote {
  color: #fff;
}
.testimonials .quote .author {
  letter-spacing: 0;
}
.testimonials .quote .author .name,
.testimonials .quote .author .company {
  font-size: 18px;
  font-weight: 400;
}
.testimonials .quote .author .name:before {
  content: '— ';
}
.testimonials .quote .author .name:after {
  content: ',';
}
.testimonials .quote .author .company {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}
.testimonials .quote .author .company.paypal {
  width: 73px;
  height: 18px;
  margin-top: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background-color: #373737;
  font-size: 0;
  -webkit-mask-image: url('/images/homepage/pricing/paypal.svg');
          mask-image: url('/images/homepage/pricing/paypal.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.join {
  display: flex;
  padding-top: 90px;
  padding-bottom: 119px;
  position: relative;
  align-items: center;
  flex-direction: column;
  color: #fff;
}
@media screen and (max-width: 1280px) {
  .join {
    padding-top: 72px;
    padding-bottom: 95px;
  }
}
@media screen and (max-width: 1024px) {
  .join {
    padding-top: 63px;
    padding-bottom: 83px;
  }
}
@media screen and (max-width: 736px) {
  .join {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.join:before {
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  background: #7800FF;
  pointer-events: none;
}
.white.join:before {
  background-color: #fff;
}
.join.two-col-view {
  padding-top: 45px;
  padding-bottom: 45px;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
}
@media screen and (max-width: 1280px) {
  .join.two-col-view {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}
@media screen and (max-width: 1024px) {
  .join.two-col-view {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 800px) {
  .join.two-col-view {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media screen and (max-width: 736px) {
  .join.two-col-view {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.white.join.two-col-view {
  color: #2b2b2b;
}
.join.two-col-view .heading {
  margin-bottom: 24px;
}
@media screen and (max-width: 1280px) {
  .join.two-col-view .heading {
    margin-bottom: 19px;
  }
}
@media screen and (max-width: 800px) {
  .join.two-col-view .heading {
    margin-bottom: 17px;
  }
}
@media screen and (max-width: 736px) {
  .join.two-col-view .heading {
    margin-bottom: 15px;
  }
}
.join.two-col-view .heading .title {
  font-weight: 300;
}
@media screen and (max-width: 1280px) {
  .join.two-col-view .heading .title {
    font-size: 34px;
  }
}
@media screen and (max-width: 800px) {
  .join.two-col-view .heading .title {
    font-size: 29px;
  }
}
@media screen and (max-width: 736px) {
  .join.two-col-view .heading .title {
    font-size: 24px;
  }
}
.join.two-col-view .column {
  display: flex;
  width: 50%;
  padding: 25px 20px 45px 20px;
  align-items: center;
  flex-direction: column;
}
@media screen and (max-width: 1280px) {
  .join.two-col-view .column {
    padding-top: 20px;
    padding-bottom: 36px;
  }
}
@media screen and (max-width: 1024px) {
  .join.two-col-view .column {
    width: 100%;
    padding-bottom: 20px;
    border-right: 0 !important;
  }
  .join.two-col-view .column:not(:first-child) {
    border-bottom: 1px solid #dadada;
  }
  .join.two-col-view .column:first-child {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 800px) {
  .join.two-col-view .column {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}
@media screen and (max-width: 736px) {
  .join.two-col-view .column {
    padding: 10px 0 0 0;
  }
  .join.two-col-view .column:not(:first-child) {
    margin-bottom: 10px;
    border-bottom: 0;
  }
}
.join.two-col-view .column.demo {
  border-right: 1px solid #dadada;
}
.join.two-col-view .column .call {
  margin-bottom: 20px;
  padding-top: 8px;
  color: #2b2b2b;
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
}
@media screen and (max-width: 1280px) {
  .join.two-col-view .column .call {
    margin-bottom: 16px;
    padding-top: 5px;
    font-size: 20px;
    line-height: 28px;
  }
}
@media screen and (max-width: 800px) {
  .join.two-col-view .column .call {
    margin-bottom: 14px;
    font-size: 17px;
    line-height: 24px;
  }
}
@media screen and (max-width: 736px) {
  .join.two-col-view .column .call {
    margin-bottom: 10px;
    padding-top: 0;
    font-size: 16px;
    line-height: 22px;
  }
}
.join.two-col-view .column .phone-number {
  color: #7800FF;
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .join.two-col-view .column .email {
    margin-bottom: 0;
  }
}
.join.two-col-view .column .email,
.join.two-col-view .column .email a {
  color: #919191;
  font-size: 20px;
}
@media screen and (max-width: 1280px) {
  .join.two-col-view .column .email,
  .join.two-col-view .column .email a {
    font-size: 16px;
  }
}
@media screen and (max-width: 736px) {
  .join.two-col-view .column .email,
  .join.two-col-view .column .email a {
    font-size: 14px;
  }
}
.join.two-col-view .column .email a {
  position: relative;
}
.join.two-col-view .column .email a:after {
  content: '';
  border-bottom: 1px solid #919191;
  bottom: 0;
  left: 0;
  opacity: 0.25;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.join.two-col-view .column .email a:hover:after {
  opacity: 0;
}
.join.two-col-view .column .signup-legal-note {
  color: #919191;
  font-size: 10px;
  line-height: 14px;
}
.join.two-col-view .column .signup-legal-note a {
  position: relative;
}
.join.two-col-view .column .signup-legal-note a:after {
  content: '';
  border-bottom: 1px solid #919191;
  bottom: 0;
  left: 0;
  opacity: 0.25;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.join.two-col-view .column .signup-legal-note a:hover:after {
  opacity: 0;
}
.join .heading-section {
  margin-bottom: 33px;
  text-align: center;
}
@media screen and (max-width: 1280px) {
  .join .heading-section {
    margin-bottom: 26px;
  }
}
@media screen and (max-width: 1024px) {
  .join .heading-section {
    margin-bottom: 23px;
  }
}
@media screen and (max-width: 736px) {
  .join .heading-section {
    margin-bottom: 10px;
  }
}
.join .heading-section .subtitle {
  color: #fff;
}
.join .signup-legal-note {
  color: #fff;
}
.join .signup-legal-note a {
  position: relative;
}
.join .signup-legal-note a:after {
  content: '';
  border-bottom: 1px solid #fff;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.join .signup-legal-note a:hover:after {
  opacity: 0;
}
.join-form {
  position: relative;
  z-index: 1;
  background: linear-gradient(to top, #fff, #fff 61px, #2b2b2b 61px, #2b2b2b);
  text-align: center;
}
.join-form.flat {
  background: none;
}
.join-form.flat.gray {
  background: #f6f6f8;
}
.join-form .container {
  max-width: 830px;
  padding: 93px 20px 69px;
  position: relative;
  top: -31px;
  background-color: #fff;
  box-shadow: 0 22px 90px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 1280px) {
  .join-form .container {
    padding: 74px 20px 45px;
  }
}
@media screen and (max-width: 800px) {
  .join-form .container {
    padding: 65px 20px 31px;
  }
}
@media screen and (max-width: 736px) {
  .join-form .container {
    padding: 40px 10px;
  }
}
.flat.join-form .container {
  padding-top: 111px;
  padding-bottom: 120px;
  position: static;
  background: none;
  box-shadow: none;
}
@media screen and (max-width: 1280px) {
  .flat.join-form .container {
    padding-top: 89px;
    padding-bottom: 96px;
  }
}
@media screen and (max-width: 800px) {
  .flat.join-form .container {
    padding-top: 78px;
    padding-bottom: 84px;
  }
}
@media screen and (max-width: 736px) {
  .flat.join-form .container {
    padding: 40px 10px;
  }
}
.join-form .container .heading {
  margin-bottom: 28px;
}
@media screen and (max-width: 1280px) {
  .join-form .container .heading {
    margin-bottom: 22px;
  }
}
@media screen and (max-width: 800px) {
  .join-form .container .heading {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 736px) {
  .join-form .container .heading {
    margin-bottom: 10px;
  }
}
.join-form .container .heading .title {
  color: #040404;
  font-size: 48px;
}
@media screen and (max-width: 1280px) {
  .join-form .container .heading .title {
    font-size: 38px;
  }
}
@media screen and (max-width: 800px) {
  .join-form .container .heading .title {
    font-size: 34px;
  }
}
@media screen and (max-width: 736px) {
  .join-form .container .heading .title {
    font-size: 24px;
  }
}
.join-form .container .heading .title.light {
  margin-bottom: 15px;
  font-size: 36px;
  font-weight: 300;
}
@media screen and (max-width: 736px) {
  .join-form .container .heading .title.light {
    margin-bottom: 10px;
    font-size: 24px;
  }
}
.join-form .container p {
  color: #515151;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
@media screen and (max-width: 736px) {
  .join-form .container p {
    font-size: 16px;
    line-height: 24px;
  }
}
.join-form .container .hbspt {
  margin-top: 91px !important;
}
@media screen and (max-width: 1280px) {
  .join-form .container .hbspt {
    margin-top: 72px !important;
  }
}
@media screen and (max-width: 800px) {
  .join-form .container .hbspt {
    margin-top: 58px !important;
  }
}
@media screen and (max-width: 736px) {
  .join-form .container .hbspt {
    margin-top: 20px !important;
    padding: 0;
  }
  .join-form .container .hbspt .submit-message {
    display: none;
  }
}
.flat.join-form .container .hbspt {
  margin-top: 50px !important;
}
@media screen and (max-width: 736px) {
  .flat.join-form .container .hbspt {
    margin-top: 20px !important;
  }
}
.join-form .form-container {
  width: 430px;
  margin: 0 auto;
}
/* Cookies bar */
.cookies-info {
  width: 100%;
  height: 34px;
  background: #121e25;
  color: #919191;
  text-align: center;
}
@media screen and (max-width: 930px) {
  .cookies-info {
    height: 48px;
  }
}
.cookies-info ~ .top-bar {
  margin-top: 34px;
}
@media screen and (max-width: 930px) {
  .cookies-info ~ .top-bar {
    margin-top: 48px;
  }
}
.cookies-info a {
  color: #919191;
}
.cookies-info-jp {
  height: 34px;
}
@media screen and (max-width: 1133px) {
  .cookies-info-jp {
    height: 48px;
  }
}
@media screen and (max-width: 578px) {
  .cookies-info-jp {
    height: 62px;
  }
}
@media screen and (max-width: 393px) {
  .cookies-info-jp {
    height: 72px;
  }
}
.cookies-info-jp ~ .top-bar {
  margin-top: 34px;
}
@media screen and (max-width: 1133px) {
  .cookies-info-jp ~ .top-bar {
    margin-top: 48px;
  }
}
@media screen and (max-width: 578px) {
  .cookies-info-jp ~ .top-bar {
    margin-top: 62px;
  }
}
@media screen and (max-width: 393px) {
  .cookies-info-jp ~ .top-bar {
    margin-top: 72px;
  }
}
.cookies-info .wrapper {
  width: 980px;
  margin: 0 auto;
  padding: 10px;
  font-size: 11px;
  line-height: 14px;
}
.cookies-info-jp.cookies-info .wrapper {
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .cookies-info .wrapper {
    width: 100%;
  }
}
@media screen and (min-width: 1025px) {
  .cookies-info .wrapper {
    width: auto;
    min-width: 280px;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}
.cookies-info .wrapper p {
  display: inline;
  margin: 0;
}
@media screen and (max-width: 736px) {
  .cookies-info .wrapper p {
    line-height: 14px;
  }
}
.cookies-info .wrapper p:first-child {
  padding-right: 15px;
}
.cookies-info .buttons a.ok {
  margin-right: 10px;
  padding: 3px 10px;
  border-radius: 3px;
  background: #ff6b62;
  color: #fff;
}
#ContentWrapper {
  padding: 10px;
  background: #fff;
}
#colorbox {
  z-index: 99999;
  background: #fff;
}
#colorbox button {
  display: block;
  border: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  background: 0;
  box-shadow: none;
  font-size: 0;
}
#colorbox button:before {
  content: "\00D7";
  color: #2b2b2b;
  font-size: 24px;
}
.pricing-table {
  display: flex;
  position: relative;
  align-items: stretch;
  flex-wrap: wrap;
  background-color: #fff;
  box-shadow: 0 82px 186px -115px rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 736px) {
  .pricing-table {
    margin-bottom: 45px;
    flex-direction: column;
  }
}
.pricing-table .column {
  width: 25%;
  margin-top: 27px;
  padding-bottom: 44px;
  padding-left: 30px;
  color: #373737;
}
@media screen and (max-width: 1280px) {
  .pricing-table .column {
    padding-bottom: 35px;
  }
}
@media screen and (max-width: 736px) {
  .pricing-table .column {
    width: 100%;
    max-width: 420px;
    min-height: 0;
    padding-bottom: 0;
    padding-left: 10px;
    align-self: center;
  }
  .pricing-table .column:not(.main) {
    margin-top: 0;
  }
}
@media screen and (max-width: 415px) {
  .pricing-table .column {
    width: 100%;
  }
  .pricing-table .column:not(:last-of-type) {
    margin-bottom: 20px;
  }
}
.pricing-table .column.main {
  position: relative;
  z-index: 2;
  box-shadow: 0 0 81px 0 rgba(0, 0, 0, 0.06), inset 0 -48px 60px -17px rgba(0, 0, 0, 0.028);
}
@media screen and (max-width: 415px) {
  .pricing-table .column.main {
    z-index: auto;
  }
}
@media screen and (max-width: 736px) {
  .pricing-table .column.main {
    box-shadow: none;
  }
}
.pricing-table .column .heading {
  margin-top: 23px;
  margin-bottom: 9px;
}
@media screen and (max-width: 1280px) {
  .pricing-table .column .heading {
    margin-top: 18px;
    margin-bottom: 7px;
  }
}
@media screen and (max-width: 800px) {
  .pricing-table .column .heading {
    margin-top: 16px;
    margin-bottom: 5px;
  }
}
.pricing-table .column .heading .title {
  margin-top: 0;
  margin-bottom: 3px;
  color: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.pricing-table .column .info {
  height: 22px;
  padding-top: 1px;
  position: absolute;
  top: -22px;
  right: 0;
  left: 0;
  background: #006cff;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
}
.pricing-table .column .description {
  margin-bottom: 24px;
  padding-right: 20px;
  color: #6a6a6a;
  font-size: 16px;
  line-height: 22px;
}
@media screen and (max-width: 800px) {
  .pricing-table .column .description {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (max-width: 1230px) {
  .pricing-table .column .description {
    min-height: 66px;
    margin-bottom: 20px;
  }
}
.pricing-table .column .pricing,
.pricing-table .column .additional-info {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 400;
}
.pricing-table .column .pricing .price,
.pricing-table .column .additional-info .price {
  margin-right: 3px;
  font-size: 28px;
  font-weight: 600;
  line-height: 24px;
}
.pricing-table .column .pricing {
  color: #373737;
}
.pricing-table .column .pricing .price {
  display: none;
}
.pricing-table .column .limits {
  display: block;
  min-height: 26px;
  color: #919191;
  font-size: 14px;
  line-height: 18px;
}
.pricing-table .column .limits.limits-monthly,
.pricing-table .column .limits.limits-annual {
  display: none;
}
.pricing-table .column .additional-info {
  min-height: 54px;
  padding-top: 5px;
}
.pricing-table .column .btn-solid,
.pricing-table .column .btn-ghost {
  min-width: 185px;
  margin-top: 11px;
  margin-bottom: 26px;
}
@media screen and (max-width: 1280px) {
  .pricing-table .column .btn-solid,
  .pricing-table .column .btn-ghost {
    min-width: 155px;
    margin-top: 9px;
    margin-bottom: 23px;
  }
}
@media screen and (max-width: 800px) {
  .pricing-table .column .btn-solid,
  .pricing-table .column .btn-ghost {
    margin-top: 7px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 736px) {
  .pricing-table .column .btn-solid,
  .pricing-table .column .btn-ghost {
    margin-bottom: 15px;
  }
}
.pricing-table .column .features {
  width: 100%;
  margin: 0;
  justify-content: flex-start;
}
.pricing-table .column .features .content {
  display: block;
  width: 100%;
  margin-bottom: 11px;
  padding-right: 10px;
  position: relative;
  color: #373737;
  font-size: 14px;
  line-height: 18px;
}
@media screen and (max-width: 800px) {
  .pricing-table .column .features .content {
    margin-bottom: 1px;
  }
}
@media screen and (max-width: 736px) {
  .pricing-table .column .features .content {
    margin-bottom: 7px;
  }
}
.pricing-table .column .features .content[data-show-node='cloud']:hover span {
  border-color: transparent;
}
.pricing-table .column .features .content[data-show-node='cloud'] span {
  padding-bottom: 1px;
  border-bottom: 1px dotted #dadada;
}
.pricing-table .column .features .content .cloud {
  top: 25px;
  z-index: 3;
  color: #fff;
  font-style: normal;
  line-height: 18px;
  pointer-events: none;
}
.pricing-table .column .features .content .cloud p {
  margin-top: 0;
  margin-bottom: 15px;
  color: inherit;
}
.pricing-table .column .features .content .cloud p:last-child {
  margin-bottom: 0;
}
.pricing-table .column .features .content .cloud li {
  margin-left: 10px;
  list-style: disc;
}
.pricing-table .annotation {
  width: 100%;
  position: absolute;
  bottom: -57px;
  color: #919191;
  font-size: 11px;
  text-align: center;
}
.comparison-table {
  position: relative;
}
.comparison-table .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.comparison-table table {
  width: 100%;
  min-width: 900px;
  color: #373737;
}
.comparison-table table .heading {
  padding-bottom: 41px;
  border-bottom: 1px solid #e6e6e6;
}
@media screen and (max-width: 1280px) {
  .comparison-table table .heading {
    padding-bottom: 33px;
  }
}
.comparison-table table .heading .title,
.comparison-table table .heading .price,
.comparison-table table .heading .text {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.comparison-table table .heading .title,
.comparison-table table .heading .text {
  max-width: 250px;
}
.comparison-table table .heading .title {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%;
}
.comparison-table table .heading .title.large {
  font-size: 24px;
}
.comparison-table table .heading .text {
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
}
.comparison-table table .heading .price {
  margin-bottom: 5px;
  color: #373737;
  font-size: 14px;
  font-weight: 400;
}
.comparison-table table .heading .price strong {
  display: none;
}
.comparison-table table .heading .btn-ghost,
.comparison-table table .heading .btn-solid {
  min-width: 185px;
  margin-right: 30px;
  margin-left: 30px;
}
@media screen and (max-width: 1280px) {
  .comparison-table table .heading .btn-ghost,
  .comparison-table table .heading .btn-solid {
    margin-right: 15px;
    margin-left: 15px;
  }
}
.comparison-table table .subheading {
  padding-top: 23px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 24px;
  font-weight: 400;
  text-align: left;
}
@media screen and (max-width: 1280px) {
  .comparison-table table .subheading {
    padding-top: 21px;
    padding-bottom: 11px;
  }
}
.comparison-table td {
  padding-top: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 14px;
}
@media screen and (max-width: 736px) {
  .comparison-table td {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}
.comparison-table td:first-child {
  width: 36.6%;
}
@media screen and (max-width: 736px) {
  .comparison-table td:first-child {
    width: 22.5%;
  }
}
.comparison-table td:first-child[data-show-node='cloud']:hover > span:after {
  display: none;
}
.comparison-table td:first-child[data-show-node='cloud'] > span {
  position: relative;
}
.comparison-table td:first-child[data-show-node='cloud'] > span:after {
  content: '';
  border-bottom: 1px solid #000;
  bottom: 0;
  left: 0;
  opacity: 0.1;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.comparison-table td:first-child[data-show-node='cloud'] > span:hover:after {
  opacity: 0;
}
.comparison-table td:not(:first-child) {
  text-align: center;
}
.comparison-table td:not(:first-child):not(:nth-child(2)) {
  border-left: 1px solid #e6e6e6;
}
.comparison-table .included {
  display: block;
  width: 11px;
  height: 8px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  font-size: 0;
}
.comparison-table .included:before {
  text-align: center;
  font-family: 'UXPin-Homepage-20';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-transform: none;
  line-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e901";
  color: inherit;
  font-size: 8px;
  position: absolute;
  top: 1px;
  left: 0;
}
.comparison-table .cloud {
  margin-top: 6px;
  z-index: 2;
  color: #fff;
  font-style: normal;
  pointer-events: none;
}
.comparison-table .cloud li {
  margin-left: 10px;
  list-style: disc;
}
#plan-switcher {
  display: flex;
  margin-top: 37px;
  justify-content: center;
}
#plan-switcher li {
  margin: 0 15px;
}
#plan-switcher li label {
  padding-left: 23px;
  position: relative;
  color: #414141;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
#plan-switcher li label .discount {
  display: inline-block;
  margin-right: 5px;
  margin-left: 10px;
  padding: 4px 7px 2px 6px;
  border-radius: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  background-color: #ff7d3a;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.025em;
  line-height: 100%;
  text-transform: uppercase;
}
#plan-switcher li label:before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #cdcdcd;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 415px) {
  #plan-switcher {
    align-items: center;
    flex-direction: column;
  }
  #plan-switcher li {
    width: 250px;
    margin-bottom: 10px;
  }
}
.plan-switcher-radio {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.plan-switcher-radio:checked#monthly-plan-section ~ .container #plan-switcher .monthly-plan-label:before {
  border-width: 5px;
  border-color: #006cff;
}
.plan-switcher-radio:checked#monthly-plan-section ~ .container .pricing-table .price-monthly,
.plan-switcher-radio:checked#monthly-plan-section ~ .comparison-table .price-monthly {
  display: inline !important;
}
.plan-switcher-radio:checked#annual-plan-section ~ .container #plan-switcher .annual-plan-label:before {
  border-width: 5px;
  border-color: #006cff;
}
.plan-switcher-radio:checked#annual-plan-section ~ .container .pricing-table .price-annual,
.plan-switcher-radio:checked#annual-plan-section ~ .comparison-table .price-annual {
  display: inline !important;
}
.plan-switcher-radio:checked#monthly-plan-section ~ .container .pricing-table .column .limits-monthly {
  display: block !important;
}
.plan-switcher-radio:checked#annual-plan-section ~ .container .pricing-table .column .limits-annual {
  display: block !important;
}
.plan-switcher-radio:checked#monthly-plan-section ~ .container .paid-options .monthly {
  display: inline;
}
.plan-switcher-radio:checked#annual-plan-section ~ .container .paid-options .annual {
  display: inline;
}
.plan-switcher-radio:checked#annual-plan-section ~ .container .pricing-table .billing-info {
  display: block;
}
.plan-switcher-radio:checked#monthly-plan-section ~ .container .pricing-table.pricing-four-cols .column .pricing {
  margin-bottom: 34px;
}
.faq {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.faq .column {
  width: 50%;
  max-width: 508px;
  color: #373737;
}
@media screen and (max-width: 736px) {
  .faq .column {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
.faq .column:first-of-type {
  padding-right: 10px;
}
.faq .column:last-of-type {
  padding-left: 10px;
}
.faq .column .title {
  margin-bottom: 13px;
  color: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}
@media screen and (max-width: 1280px) {
  .faq .column .title {
    margin-bottom: 10px;
    font-size: 16px;
  }
}
@media screen and (max-width: 800px) {
  .faq .column .title {
    margin-bottom: 0;
  }
}
.faq p {
  font-size: 14px;
  line-height: 24px;
}
.faq p + .title {
  margin-top: 48px;
}
@media screen and (max-width: 1280px) {
  .faq p + .title {
    margin-top: 38px;
  }
}
@media screen and (max-width: 800px) {
  .faq p + .title {
    margin-top: 34px;
  }
}
@media screen and (max-width: 800px) {
  .faq p + .title {
    margin-top: 10px;
  }
}
.faq p a {
  color: #7800FF;
}
.features {
  display: flex;
  padding-bottom: 22px;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-around;
}
.features .heading-minor {
  margin-top: 17px;
  margin-bottom: 58px;
}
@media screen and (max-width: 1280px) {
  .features .heading-minor {
    margin-top: 14px;
    margin-bottom: 46px;
  }
}
@media screen and (max-width: 800px) {
  .features .heading-minor {
    margin-top: 12px;
    margin-bottom: 41px;
  }
}
.features .feature {
  display: flex;
  max-width: 246px;
  padding: 85px 3px 0 3px;
  position: relative;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .features .feature {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 736px) {
  .features .feature {
    width: 50%;
    padding-top: 68px;
  }
  .features .feature:not(:nth-last-child(2)):not(:last-child) {
    margin-bottom: 40px;
  }
}
.features .feature.big {
  width: 33.3%;
  max-width: 307px;
  padding-top: 117px;
}
.features .feature.small-teams img,
.features .feature.cloud-based img {
  top: 10px;
}
.features .feature img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.features .feature figcaption {
  line-height: 1;
}
.features .feature .title,
.features .feature .description {
  font-weight: 400;
}
.features .feature .title {
  margin-bottom: 16px;
  color: #444;
  font-size: 20px;
}
@media screen and (max-width: 1280px) {
  .features .feature .title {
    font-size: 18px;
  }
}
@media screen and (max-width: 736px) {
  .features .feature .title {
    margin-bottom: 5px;
  }
}
.features .feature .description {
  color: #6a6a6a;
  font-size: 14px;
  line-height: 24px;
}
.hs-form {
  display: flex;
  width: 430px !important;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 !important;
  flex-direction: column;
  font-family: 'ProximaNova', sans-serif !important;
  text-align: left;
}
@media screen and (max-width: 736px) {
  .hs-form {
    display: block;
    padding: 0 !important;
  }
}
.hs-form .hs-form-required {
  display: none;
}
.hs-form .input {
  display: flex;
  margin-bottom: 20px;
  float: none;
  position: relative;
  flex-direction: column;
}
.hs-form .hs-form-field {
  width: 100% !important;
  margin-top: 19px;
  position: relative;
}
.hs-form .hs-form-field:first-of-type {
  margin-top: 0;
}
.hs-form .hs-form-field > label {
  width: auto !important;
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  transform-origin: top left;
  color: #6a6a6a;
  font-family: 'ProximaNova', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  pointer-events: none;
  transition: color 0.2s ease-out, font-size 0.2s ease-out, transform 0.2s ease-out;
}
@media screen and (max-width: 480px) {
  .hs-form .hs-form-field > label {
    top: 15px;
  }
}
.hs-form .hs-form-field > label.focus {
  transform: translate(0, -10px) scale(0.72);
  color: #a6a6a6;
}
.hs-form .hs-input {
  padding: 15px;
  border: 1px solid #dadada;
  border-radius: 8px;
  outline: none;
  position: relative;
  z-index: 1;
  box-shadow: inset 999px 999px #fff;
  font-size: 14px;
  line-height: 21px;
  transition: border-color 0.2s ease-out;
}
.hs-form .hs-input:focus {
  border-color: #006cff !important;
}
.hs-form .hs-input.error {
  border-color: #e20c00 !important;
}
.hs-form input[type='text'],
.hs-form input[type='tel'],
.hs-form input[type='email'],
.hs-form select {
  height: 50px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.hs-form select {
  color: #6a6a6a;
  font-family: 'ProximaNova', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: none;
}
.hs-form select.hs-input {
  padding-top: 12px;
}
.hs-form select.not-selected {
  color: #6a6a6a;
  font-family: 'ProximaNova', sans-serif !important;
  font-weight: 600 !important;
}
.hs-form select ~ .hbspt-select-arrow:before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px #dadada;
  border-style: none solid solid none;
  border-radius: 8px;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  transform: rotate(45deg);
}
.hs-form textarea {
  height: 100px;
  min-height: 100px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.hs-form .hs-error-msgs {
  margin-bottom: -23px;
  transform: translateY(-24px);
  text-align: left;
}
.hs-form .hs-error-msgs label {
  color: #e20c00;
  font-size: 12px;
  line-height: 16px;
}
.hs-form .hs-error-msgs li {
  list-style-type: none !important;
}
.hs-form .inputs-list {
  text-align: left;
}
.hs-form .hs-field-desc {
  margin: 0;
  margin-bottom: 7px;
  padding-top: 4px;
  color: #6a6a6a;
  font-size: 14px;
  font-weight: 600 !important;
  text-align: left;
}
.hs-form .hs-form-checkbox,
.hs-form .hs-form-booleancheckbox {
  width: auto !important;
  margin-bottom: 1px;
  padding-left: 26px !important;
  position: relative;
}
.hs-form .hs-form-checkbox label,
.hs-form .hs-form-booleancheckbox label {
  color: #6a6a6a;
  font-size: 13px;
  line-height: 1;
}
.hs-form .hs-form-checkbox input[type=checkbox]:only-of-type,
.hs-form .hs-form-booleancheckbox input[type=checkbox]:only-of-type,
.hs-form .hs-form-checkbox input[type=radio]:only-of-type,
.hs-form .hs-form-booleancheckbox input[type=radio]:only-of-type {
  height: auto;
  position: absolute;
  top: 7px;
  left: 7px;
  box-shadow: none;
  box-shadow: initial;
}
.hs-form .hs_error_rollup {
  display: none;
}
.hs-form .hs_canada_sign_in {
  display: none;
}
.hs-form .small-info {
  display: block;
  margin-top: 4px;
  color: #848484;
  font-size: 12px;
}
.hs-form .hs_submit {
  width: 100% !important;
  margin-top: 22px;
}
.hs-form .hs_submit .actions {
  margin: 0 !important;
}
.hs-form .hs_submit .actions input[type='submit'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.hs-form .hs_submit .actions input[type='submit'].hs-button,
.hs-form .hs_submit .actions input[type='submit'].btn-solid {
  font-family: 'ProximaNova', sans-serif;
}
.hs-form .hs_submit .actions input[type='submit'].hs-button ~ .submit-message,
.hs-form .hs_submit .actions input[type='submit'].btn-solid ~ .submit-message {
  display: none !important;
}
.hs-form.small-col,
.hs-form.enterprise {
  max-width: 308px;
}
.hs-form.small-col .hs-form-field > label,
.hs-form.enterprise .hs-form-field > label {
  top: 10px;
}
.hs-form.small-col input[type='text'],
.hs-form.enterprise input[type='text'],
.hs-form.small-col input[type='tel'],
.hs-form.enterprise input[type='tel'],
.hs-form.small-col input[type='email'],
.hs-form.enterprise input[type='email'],
.hs-form.small-col select,
.hs-form.enterprise select {
  height: 44px;
}
.hs-form.small-col select,
.hs-form.enterprise select {
  padding-top: 10px;
  padding-bottom: 12px;
}
.hs-form.small-col select ~ .hbspt-select-arrow:before,
.hs-form.enterprise select ~ .hbspt-select-arrow:before {
  top: 16px;
}
.hs-form.small-col input[type='submit'],
.hs-form.enterprise input[type='submit'] {
  width: 100%;
  height: 44px;
  padding: 10px 30px;
  border: 0;
  border-radius: 8px;
  background: #006cff;
  background-clip: padding-box;
  box-shadow: none;
  color: #fff;
  font-family: 'ProximaNova', sans-serif !important;
  font-size: 14px;
  font-weight: bold;
  line-height: 1em;
  text-decoration: none;
  transition: background 0.3s ease;
}
.hs-form.small-col input[type='submit']:hover,
.hs-form.enterprise input[type='submit']:hover {
  border: none;
  background: #3389ff;
}
.hs-form.small-col .hs-error-msgs,
.hs-form.enterprise .hs-error-msgs {
  margin-top: 0 !important;
  margin-bottom: -24px;
  padding-left: 0 !important;
  transform: translateY(-23px);
}
.hs-form.small-col .hs-error-msgs li,
.hs-form.enterprise .hs-error-msgs li {
  margin-bottom: 0 !important;
  line-height: 21px !important;
  list-style-type: none !important;
}
.hs-form.enterprise input[type='text']:focus,
.hs-form.enterprise input[type='tel']:focus,
.hs-form.enterprise input[type='email']:focus,
.hs-form.enterprise select:focus {
  border-color: #d8994d !important;
}
.hs-form.enterprise input[type='submit'] {
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.hs-form.inline {
  flex-direction: row;
}
.hs-form.inline .hs_submit {
  margin-top: 0;
}
.hs-form.inline input[type='submit'] {
  min-width: 142px;
  height: 50px;
  margin-left: 10px;
  padding: 7px 15px;
  border: 1px solid #006cff;
  border-radius: 8px;
  background: #006cff;
  box-shadow: none;
  color: #fff;
  font-family: 'ProximaNova', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  transition: background 0.2s ease-out;
}
.hs-form.inline input[type='submit']:hover {
  background: #0061e6;
}
.hs-form.inline input[type='email'] {
  width: 270px !important;
  padding: 14px 15px 10px;
}
.hs-form.inline input[type='email'].error {
  border-color: #e20c00;
}
.hs-form.inline input[type='email'],
.hs-form.inline .hs-form-field > label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.hs-form.inline .hs-form-field > label {
  top: 13px;
  left: 16px;
}
.hs-form.inline .hs-form-field > label.focus {
  transform: translate(-4px, -10px) scale(0.72);
}
.hs-form.questionnaire-form,
.hs-form.virtual-summit {
  margin-bottom: 40px;
}
.hs-form.questionnaire-form .hs-error-msgs,
.hs-form.virtual-summit .hs-error-msgs {
  margin-bottom: -24px;
}
.hs-form.questionnaire-form input[type='submit'],
.hs-form.virtual-summit input[type='submit'] {
  display: block;
  width: 100%;
  height: 50px!important;
  padding: 0 24px;
  border: none;
  background-color: #006cff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 50px;
  transition: background-color 0.1s ease-out;
}
.hs-form.questionnaire-form input[type='submit']:hover,
.hs-form.virtual-summit input[type='submit']:hover {
  background-color: #3389ff;
}
.hs-form.questionnaire-form .confidentiality-label {
  color: #6a6a6a;
  font-size: 14px;
  font-weight: 600 !important;
  text-align: left;
}
.hs-form.questionnaire-form .hs_topicsofinterestbetausabilityoptin .hs-error-msgs,
.hs-form.questionnaire-form .hs_agreetorecordbetausabilityoptin .hs-error-msgs,
.hs-form.questionnaire-form .hs_ndabetausabilityoptin .hs-error-msgs {
  transform: translateY(-33px);
}
.hs-form.questionnaire-form .hs_agreetorecordbetausabilityoptin,
.hs-form.questionnaire-form .hs_ndabetausabilityoptin {
  margin-top: 1px;
}
.hs-form.questionnaire-form .hs_agreetorecordbetausabilityoptin .hs-form-booleancheckbox,
.hs-form.questionnaire-form .hs_ndabetausabilityoptin .hs-form-booleancheckbox {
  line-height: 1;
}
.hs-form.questionnaire-form .hs_agreetorecordbetausabilityoptin .hs-form-booleancheckbox input[type='checkbox'],
.hs-form.questionnaire-form .hs_ndabetausabilityoptin .hs-form-booleancheckbox input[type='checkbox'] {
  top: 3px;
}
.hbspt {
  text-align: center;
}
.hbspt .submitted-message {
  display: inline-block;
  margin-top: 35px;
  padding: 10px 10px 10px 40px!important;
  background: url('/images/homepage/green-tick.svg') no-repeat 10px 14px;
  background-size: 18px 14px;
  color: #63ad0e !important;
  font-size: 18px !important;
  font-weight: 400;
}
.hbspt.submit-msg-no-spacing .submitted-message {
  margin-top: 0;
}
.hbspt.info-text:after {
  font-size: 12px;
  line-height: 16px;
  content: attr(data-info);
  display: block;
  margin: 14px auto 0;
  color: #a6a6a6;
}
.hbspt + .hbspt-legal-note {
  font-size: 12px;
  line-height: 16px;
  display: block;
  width: 100%;
  margin-top: 20px;
  color: #919191;
  text-align: center;
}
.hbspt + .hbspt-legal-note.gated-content {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}
.hbspt + .hbspt-legal-note a {
  color: inherit;
  text-decoration: none;
  position: relative;
}
.hbspt + .hbspt-legal-note a:after {
  content: '';
  border-bottom: 1px solid #919191;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.hbspt + .hbspt-legal-note a:hover:after {
  opacity: 0;
}
.virtual-summit .hbspt + .hbspt-legal-note {
  margin-top: 0;
  margin-bottom: 20px;
}
/* Contact Form Modal */
.cover-dark {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  background-color: rgba(30, 30, 30, 0.9);
  transition: visibility 0.3s ease, opacity 0.3s ease;
}
.cover-dark.visible {
  visibility: visible;
  opacity: 1;
}
#modal-contact-form {
  visibility: hidden;
  opacity: 0;
  width: 510px;
  padding: 40px 50px;
  border-radius: 8px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: #fff;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out 0s;
}
#modal-contact-form .heading {
  margin-bottom: 42px;
}
#modal-contact-form .heading .title {
  color: #006cff;
  font-size: 30px;
  font-weight: 300;
  line-height: 42px;
  text-align: left;
}
#modal-contact-form .icon-20-close-button {
  position: absolute;
  top: 30px;
  right: 31px;
  border: 0;
  background: none;
  color: #ccc;
  font-size: 0;
}
#modal-contact-form .icon-20-close-button:before {
  content: "\e907";
  color: #c7c7c7;
  font-size: 13px;
}
#modal-contact-form .icon-20-close-button:hover {
  color: #999999;
}
#modal-contact-form.visible {
  visibility: visible;
  opacity: 1;
}
.stories:not(.container) {
  margin-right: -11px;
  margin-left: -11px;
}
@media screen and (max-width: 800px) {
  .stories:not(.container) {
    margin-right: -5px;
    margin-left: -5px;
  }
}
@media screen and (max-width: 736px) {
  .stories:not(.container) {
    margin-right: 0;
    margin-left: 0;
  }
}
.stories.container:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
}
.stories .story {
  width: calc(33.3% - 14.6px);
  margin: 11px;
  padding-bottom: calc(33.3% - 14.6px);
  float: left;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .stories .story {
    width: calc(33.3% - 6.6px);
    margin: 5px;
    padding-bottom: calc(33.3% - 6.6px);
  }
}
@media screen and (max-width: 736px) {
  .stories .story {
    width: 100%;
    margin: 0 0 10px 0;
    padding-bottom: 100%;
  }
}
.stories .story:nth-child(2),
.stories .story:nth-child(3n+2) {
  margin-left: 0;
}
.stories .story:nth-child(4),
.stories .story:nth-child(3n+4) {
  margin-right: 0;
}
.stories .story:first-child {
  display: flex;
  width: 100vw;
  height: 500px;
  margin: 0 0 90px 0;
  padding-bottom: 0;
  float: none;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  background: url('./images/homepage/testimonials/featured-story-troweprice.jpg') no-repeat center center;
  background-size: cover;
}
@media screen and (max-width: 1280px) {
  .stories .story:first-child {
    height: 400px;
    margin-bottom: 72px;
  }
}
@media screen and (max-width: 800px) {
  .stories .story:first-child {
    height: 350px;
    margin-bottom: 63px;
  }
}
@media screen and (max-width: 736px) {
  .stories .story:first-child {
    height: 250px;
    margin-bottom: 40px;
  }
}
.stories .story:first-child figcaption {
  width: 100%;
  height: auto;
  position: static;
  justify-content: center;
}
.stories .story:first-child figcaption .title {
  width: 251px;
  height: 38px;
  margin-bottom: 26px;
  background: url('./images/homepage/testimonials/story-logo-troweprice.svg') no-repeat 0 0;
  background-size: contain;
  text-indent: -9999px;
}
@media screen and (max-width: 1280px) {
  .stories .story:first-child figcaption .title {
    width: 200px;
    height: 30px;
    margin-bottom: 21px;
  }
}
@media screen and (max-width: 800px) {
  .stories .story:first-child figcaption .title {
    width: 175px;
    height: 27px;
    margin-bottom: 18px;
  }
}
.stories .story:first-child figcaption p {
  max-width: 690px;
  color: #fff;
  font-size: 38px;
  font-weight: 300;
  line-height: 48px;
}
@media screen and (max-width: 1280px) {
  .stories .story:first-child figcaption p {
    font-size: 30px;
    line-height: 38px;
  }
}
@media screen and (max-width: 800px) {
  .stories .story:first-child figcaption p {
    font-size: 27px;
    line-height: 34px;
  }
}
@media screen and (max-width: 736px) {
  .stories .story:first-child figcaption p {
    font-size: 24px;
  }
}
.stories .story:first-child figcaption .btn-ghost {
  min-width: 182px;
  margin-top: 18px;
  border-color: #fff;
  font-weight: bold;
}
.stories .story:first-child figcaption .btn-ghost:hover {
  border-color: #fff;
  background-color: #fff;
  color: #b83e26;
}
@media screen and (max-width: 1280px) {
  .stories .story:first-child figcaption .btn-ghost {
    margin-top: 14px;
  }
}
@media screen and (max-width: 800px) {
  .stories .story:first-child figcaption .btn-ghost {
    margin-top: 13px;
  }
}
.stories .story .company {
  position: absolute;
  top: 40px;
  left: 25px;
}
@media screen and (max-width: 800px) {
  .stories .story .company {
    top: 10px;
    left: 10px;
  }
}
.stories .story .background {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.stories .story figcaption {
  display: flex;
  height: 100%;
  padding: 28px 25px;
  position: absolute;
  top: 0;
  left: 0;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  color: #a6a6a6;
  font-size: 17px;
  line-height: 25px;
}
@media screen and (max-width: 800px) {
  .stories .story figcaption {
    padding: 10px;
    font-size: 14px;
    line-height: 21px;
  }
}
.stories .story figcaption .heading {
  margin-bottom: 4px;
}
.stories .story figcaption .heading .title {
  color: #fff;
  font-size: 23px;
  line-height: 26px;
}
@media screen and (max-width: 800px) {
  .stories .story figcaption .heading .title {
    font-size: 18px;
    line-height: 21px;
  }
}
.stories .story figcaption .btn-ghost {
  margin-top: 12px;
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.stories .story figcaption .btn-ghost:hover {
  border-color: #7800FF;
}
.uxpin-info {
  padding-top: 51px;
  padding-bottom: 112px;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 1280px) {
  .uxpin-info {
    padding-top: 40px;
    padding-bottom: 38px;
  }
}
@media screen and (max-width: 800px) {
  .uxpin-info {
    padding-top: 0;
    padding-bottom: 32px;
  }
}
@media screen and (max-width: 736px) {
  .uxpin-info {
    padding-bottom: 26px;
  }
}
.uxpin-info.gray:before {
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  background: #fbfbfb;
}
.uxpin-info .organized-by {
  display: flex;
  margin-top: 44px;
  margin-bottom: 24px;
  justify-content: center;
  color: #5e5e5e;
  font-size: 20px;
  line-height: 32px;
}
@media screen and (max-width: 1280px) {
  .uxpin-info .organized-by {
    margin-top: 35px;
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 736px) {
  .uxpin-info .organized-by {
    margin-top: 19px;
    margin-bottom: 9px;
    font-size: 16px;
    line-height: 11px;
  }
}
.uxpin-info .organized-by .logo {
  opacity: 0.8;
  width: 64px;
  height: 64px;
  border-color: rgba(166, 166, 166, 0.5);
  position: relative;
  top: -17px !important;
  transform: translateZ(0);
  background-image: url('./images/homepage/uxpin-black.svg');
  background-size: 64px;
  transition: border-color 0.2s ease-out;
}
.uxpin-info .organized-by .logo:hover {
  border-color: rgba(166, 166, 166, 0.8);
}
.uxpin-info .organized-by .logo:not(:only-child) {
  left: 20px;
}
@media screen and (max-width: 736px) {
  .uxpin-info .organized-by .logo {
    width: 45px;
    height: 45px;
    background-size: 45px;
  }
}
.uxpin-info .header {
  margin-bottom: 80px;
  font-size: 36px;
  font-weight: 300;
}
@media screen and (max-width: 1280px) {
  .uxpin-info .header {
    margin-bottom: 71px;
    font-size: 30px;
  }
}
@media screen and (max-width: 800px) {
  .uxpin-info .header {
    margin-bottom: 62px;
  }
}
@media screen and (max-width: 736px) {
  .uxpin-info .header {
    margin-top: -10px;
    margin-bottom: 25px;
    font-size: 24px;
  }
}
.uxpin-info .header + .features {
  margin-top: -13px;
}
@media screen and (max-width: 736px) {
  .uxpin-info .header + .features {
    margin-top: 40px;
  }
}
.uxpin-info .header + .tagline {
  display: block;
  max-width: 100%;
  margin-top: -51px;
  margin-bottom: 73px;
}
@media screen and (max-width: 736px) {
  .uxpin-info .header + .tagline {
    margin-top: -15px;
  }
}
.uxpin-info .features {
  display: flex;
  justify-content: space-around;
}
@media screen and (max-width: 736px) {
  .uxpin-info .features {
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
.uxpin-info .features li {
  max-width: 240px;
  margin-bottom: 62px;
}
@media screen and (max-width: 1280px) {
  .uxpin-info .features li {
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 800px) {
  .uxpin-info .features li {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 736px) {
  .uxpin-info .features li {
    width: calc(50% - 20px);
    max-width: calc(50% - 20px);
    margin-bottom: 20px;
  }
}
.uxpin-info .features figure {
  width: 100%;
  height: 80px;
  margin-bottom: 12px;
  position: relative;
}
@media screen and (max-width: 736px) {
  .uxpin-info .features figure {
    height: 40px;
  }
}
.uxpin-info .features figure img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  margin: auto;
}
@media screen and (max-width: 736px) {
  .uxpin-info .features figure img {
    max-height: 45px;
  }
}
.uxpin-info .features .feature-name {
  margin-bottom: 14px;
  color: #2b2b2b;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}
@media screen and (max-width: 736px) {
  .uxpin-info .features .feature-name {
    min-height: 44px;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 22px;
  }
}
.uxpin-info .features .description {
  color: #6a6a6a;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.uxpin-info .tagline {
  max-width: 480px;
  margin: 0 auto 58px;
  color: #5e5e5e;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
}
@media screen and (max-width: 1280px) {
  .uxpin-info .tagline {
    margin-bottom: 46px;
    font-size: 16px;
  }
}
@media screen and (max-width: 800px) {
  .uxpin-info .tagline {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 736px) {
  .uxpin-info .tagline {
    margin-bottom: 32px;
    font-size: 14px;
  }
}
.uxpin-info .btn-ghost {
  max-width: 204px;
  margin-right: auto;
  margin-left: auto;
  font-weight: bold;
}
.share-buttons {
  display: flex;
  align-items: center;
  color: #fff;
}
.share-buttons .share-button {
  display: inline-block;
  width: 42px;
  height: 42px;
  margin-left: 17px;
  border: 1px solid;
  border-radius: 50%;
  position: relative;
  color: transparent;
  font-size: 0;
  line-height: 100%;
  transition: border-color 0.1s ease-out;
}
.share-buttons .share-button:before {
  position: absolute;
  top: 13px;
  left: 10px;
}
.share-buttons .share-button.icon-20-twitter-full:before {
  content: "\e904";
  color: #fff;
  font-size: 14px;
}
.share-buttons .share-button.icon-20-facebook-full:before {
  content: "\e905";
  color: #fff;
  font-size: 14px;
}
.share-buttons .share-button.icon-20-linkedin-full:before {
  content: "\e903";
  color: #fff;
  font-size: 14px;
  left: 13px;
}
.sign-up-form-new .form-container,
.sign-up-form-new .signup-legal-note {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.sign-up-form-new .form-container {
  max-width: 342px;
}
.sign-up-form-new .form-container * {
  -webkit-app-region: no-drag;
}
.sign-up-form-new .form-container .username {
  height: 0;
  margin: 0;
  overflow: hidden;
}
.sign-up-form-new .form-container .google-button {
  background-color: #fff;
  font-family: Roboto, 'ProximaNova', sans-serif;
  transition: background-color 0.2 ease-out;
}
.sign-up-form-new .form-container .google-button:hover {
  background-color: #f6f6f6;
}
.sign-up-form-new .form-container .google-button .google-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.6rem;
}
.sign-up-form-new .form-container .google-button:disabled .google-icon {
  opacity: 0.3;
  filter: grayscale(1);
}
.sign-up-form-new .separator {
  font-size: 14px;
  line-height: 21px;
  color: #b3b3b3;
  display: inline-block;
  height: 21px;
  margin: 17px auto 13px;
  padding-right: 30px;
  padding-left: 30px;
  border: none;
  position: relative;
  text-align: center;
  overflow: visible;
}
.sign-up-form-new .separator:before,
.sign-up-form-new .separator:after {
  content: '';
  width: 136px;
  border: 1px #f3f3f3;
  border-style: solid none none;
  position: absolute;
  top: 50%;
}
.sign-up-form-new .separator:before {
  left: -136px;
}
.sign-up-form-new .separator:after {
  right: -136px;
}
.sign-up-form-new .sign-in-notice {
  font-size: 14px;
  line-height: 21px;
  color: #5e5e5e;
  margin-top: 17px;
}
.sign-up-form-new .signup-legal-note {
  font-size: 10px;
  line-height: 16px;
  width: 300px;
  margin-top: 26px;
  color: #b3b3b3;
}
#page-sign-up .sign-up-form-new .signup-legal-note {
  width: auto;
  margin-top: 37px;
}
.sign-up-form-new.dark-bg .field .label {
  margin-bottom: 8px;
  color: #fff;
  font-size: 16px;
  line-height: 100%;
}
.sign-up-form-new.dark-bg .form-container .submit {
  margin-top: 18px;
}
.sign-up-form-new.dark-bg .signup-legal-note {
  font-size: 12px;
  line-height: 16px;
  width: 340px;
  margin-top: 59px;
}
.sign-up-form-new.dark-bg .separator {
  margin-top: 22px;
  margin-bottom: 25px;
}
.sign-up-form-new.dark-bg .separator:before,
.sign-up-form-new.dark-bg .separator:after {
  border-color: #474747;
}
.form-container {
  margin: 0 auto;
}
.form-container.narrow-col {
  width: 308px;
}
.form-container.one-line,
.form-container.one-line .one-line-container {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 736px) {
  .form-container.one-line,
  .form-container.one-line .one-line-container {
    flex-direction: column;
  }
}
.form-container.one-line .one-line-container {
  width: 100%;
}
.form-container .element-base {
  width: 100%;
  height: 50px;
  font-size: 16px;
}
.form-container .element-base:disabled {
  opacity: 0.5;
}
.form-container .text-field {
  font-family: 'ProximaNova', sans-serif;
}
.form-container .text-field::-moz-placeholder {
  opacity: 1;
  color: #a6a6a6;
}
.form-container .text-field::placeholder {
  opacity: 1;
  color: #a6a6a6;
}
.form-container .text-field.not-valid {
  border-color: #e20c00 !important;
}
.form-container .text-field.not-valid + .error-tip {
  display: block;
}
.form-container .submit {
  margin-top: 20px;
}
.one-line.form-container .submit {
  width: auto;
  margin-top: 0;
}
@media screen and (max-width: 736px) {
  .one-line.form-container .submit {
    margin-top: 8px !important;
  }
}
.form-container .field {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.form-container .field:not(.hidden-field) ~ .field:not(.hidden-field) {
  margin-top: 17px;
}
@media screen and (min-width: 736px) {
  .one-line.form-container .field {
    margin-right: 20px;
    flex-grow: 1;
  }
}
.form-container .field .label {
  font-size: 14px;
  line-height: 21px;
  color: #6a6a6a;
  margin-bottom: 6px;
}
.form-container .select-field {
  padding: 0 15px 0 20px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: none;
  font-family: 'ProximaNova', sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-container .select-field:invalid {
  color: #a6a6a6;
}
.form-container .select-field.not-valid {
  border-color: #e20c00;
}
.form-container .select-field-wrapper {
  position: relative;
}
.form-container .select-field-wrapper:after {
  content: '';
  display: block;
  width: 11px;
  height: 6px;
  margin: auto 0;
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  background-color: #a6a6a6;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-image: url(/images/home/icon-chevron-down.svg);
  mask-image: url(/images/home/icon-chevron-down.svg);
}
.form-container .error-tip {
  font-size: 14px;
  line-height: 21px;
  color: #5e5e5e;
  display: none;
  margin-top: 8px;
  color: #e20c00;
  text-align: left;
}
.form-container .error-tip a {
  color: #e20c00;
  position: relative;
}
.form-container .error-tip a:after {
  content: '';
  border-bottom: 1px solid #e20c00;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.form-container .error-tip a:hover:after {
  opacity: 0;
}
.form-container .error-tip.google-signin-error {
  display: none;
}
.form-container .hidden-field {
  display: none;
}
.form-container .submitted-message {
  display: inline-block;
  margin-top: 35px;
  padding: 10px 10px 10px 40px;
  background: url('/images/homepage/green-tick.svg') no-repeat 10px 14px;
  background-size: 18px 14px;
  color: #63ad0e;
  font-weight: 400;
}
#design-from-code {
  color: #444;
}
#design-from-code .monospace-input::-moz-placeholder {
  font-family: 'Overpass Mono', Inconsolata, 'Courier New', Courier, monospace;
}
#design-from-code .monospace-input,
#design-from-code .monospace-input::placeholder {
  font-family: 'Overpass Mono', Inconsolata, 'Courier New', Courier, monospace;
}
#design-from-code .btn {
  display: inline-flex;
  min-width: 200px;
  height: 50px;
  padding: 0 32px;
  border: 1px solid #00f;
  border-radius: 0;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #00f;
  color: #fff;
  font-family: 'Overpass Mono', Inconsolata, 'Courier New', Courier, monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #design-from-code .btn {
    width: 100%;
  }
}
#design-from-code .btn:after {
  content: '';
  display: inline-block;
  width: 155px;
  height: 32px;
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: -1;
  background-color: #00f;
  -webkit-mask-image: url('/images/home/btn-shadow-blue.svg');
          mask-image: url('/images/home/btn-shadow-blue.svg');
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-position: center right;
          mask-position: center right;
}
#design-from-code .btn:hover {
  border-color: #ff0;
  background-color: #ff0;
  color: #00f;
}
#design-from-code .btn--disabled {
  opacity: 0.33;
  pointer-events: none;
}
#design-from-code .btn--stretched {
  width: 100%;
  min-width: 0;
  padding: 0 16px;
}
#design-from-code .btn--small {
  min-width: 0;
  height: 40px;
  padding: 0 24px;
  font-size: 12px;
}
#design-from-code .btn--small:after {
  width: 124px;
}
#design-from-code .btn--weight-light:after {
  display: none;
}
#design-from-code .btn--weight-light:hover {
  border-color: #00f;
}
#design-from-code .btn--weight-x-light {
  background-color: transparent;
  color: #00f;
}
#design-from-code .btn--weight-x-light:after {
  display: none;
}
#design-from-code .btn--weight-x-light:hover {
  border-color: #00f;
}
#design-from-code .btn--tint-violet {
  border: 1px solid #7800ff;
  background-color: #7800ff;
  color: #fff;
}
#design-from-code .btn--tint-violet:after {
  background-color: #7800ff;
}
#design-from-code .btn--tint-violet:hover {
  border-color: #fff;
  background-color: #fff;
  color: #121212;
}
#design-from-code .btn--tint-violet:hover:after {
  background-color: #fff;
}
#design-from-code .btn__caption {
  display: block;
  padding: 16px 0;
  color: #8c8c8c;
  font-family: 'Overpass Mono', Inconsolata, 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 22px;
}
#design-from-code .btn__caption--is-centered {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
#design-from-code .text-code {
  font-family: 'Roboto Mono', monospace;
  font-size: 22px;
}
#design-from-code .centering-block {
  width: 1320px;
  max-width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 414px) {
  #design-from-code .centering-block:not(.video-wrapper) {
    padding-right: 15px;
    padding-left: 15px;
  }
}
#design-from-code .main-header {
  height: 600px;
  flex-direction: column;
}
@media screen and (max-width: 1320px) {
  #design-from-code .main-header .centering-block {
    width: 960px;
    max-width: 100%;
  }
}
#design-from-code .main-header .logo-wrapper {
  margin-top: 60px;
  margin-bottom: 0;
}
#design-from-code .main-header .logo {
  border-color: #2b2b2b;
  background-color: #2b2b2b;
}
#design-from-code .main-header .content-wrapper {
  margin: 160px auto auto;
  position: relative;
}
#design-from-code .main-header .content-wrapper .green {
  top: -58px;
  right: 427px;
}
#design-from-code .main-header .content-wrapper .orange {
  top: -40px;
  left: 352px;
}
#design-from-code .main-header .content-wrapper .pink {
  top: 195px;
  left: 504px;
}
#design-from-code .main-header .content-wrapper .blue {
  top: 221px;
  right: 355px;
}
@media screen and (max-width: 1680px) {
  #design-from-code .main-header .content-wrapper .green {
    right: 5%;
  }
  #design-from-code .main-header .content-wrapper .orange {
    left: 5%;
  }
  #design-from-code .main-header .content-wrapper .pink {
    left: 10%;
  }
  #design-from-code .main-header .content-wrapper .blue {
    right: 6%;
  }
}
@media screen and (max-width: 414px) {
  #design-from-code .main-header .content-wrapper .orange {
    left: 402px;
  }
  #design-from-code .main-header .content-wrapper .blue {
    top: 271px;
  }
  #design-from-code .main-header .content-wrapper .pink {
    left: -25%;
  }
}
#design-from-code .main-header .main-heading {
  position: relative;
  z-index: 1;
  text-align: center;
}
#design-from-code .main-header .main-heading .title-jp {
  line-height: 72px;
}
#design-from-code .main-header .main-heading h1 {
  margin-bottom: 23px;
  color: #2b2b2b;
  font-size: 64px;
  font-weight: 800;
}
#design-from-code .main-header .main-heading h2 {
  font-size: 24px;
  font-weight: 300;
  line-height: 36px;
}
#design-from-code .main-header .form-container {
  min-height: 50px;
  margin-top: 85px;
  align-items: center;
  justify-content: center;
}
#design-from-code .main-header .form-container .submitted-message {
  margin: 0;
}
#design-from-code .main-header .typeform-trigger {
  display: none;
}
#design-from-code .main-header .share-buttons {
  margin: 0 0 auto auto;
}
#design-from-code .main-header .share-buttons .share-button {
  margin-left: 5px;
  border-color: #e6e6e6;
  background-color: #fff;
  transition: border-color 0.1s ease-out, background-color 0.1s ease-out;
}
#design-from-code .main-header .share-buttons .share-button:before {
  color: #5e5e5e;
}
#design-from-code .main-header .share-buttons .share-button:hover {
  background-color: #f3f3f3;
}
#design-from-code .video-wrapper {
  max-height: 600px;
  width: 60vw;
  margin-bottom: 84px;
  position: relative;
  transition: max-height 0.3s linear;
  overflow: hidden;
}
@media screen and (max-width: 1080px) {
  #design-from-code .video-wrapper {
    width: 80vw;
  }
}
.video-playing#design-from-code .video-wrapper {
  max-height: 1080px;
  overflow: visible;
  overflow: initial;
}
#design-from-code .video-wrapper .video-container {
  width: 100%;
  height: auto;
  border-radius: 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}
.video-playing#design-from-code .video-wrapper .video-container {
  border-radius: 0;
}
#design-from-code .video-wrapper .video-container .main-video,
#design-from-code .video-wrapper .video-container .fake-poster {
  border-radius: 4px;
}
#design-from-code .video-wrapper .video-container .main-video {
  width: auto;
  max-width: calc(100%);
  height: auto;
  min-height: calc(100%);
  -o-object-fit: cover;
     object-fit: cover;
}
#design-from-code .video-wrapper .video-container .fake-poster {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  width: 100%;
  z-index: 1;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.5s ease-out;
}
#design-from-code .video-wrapper .video-container .fake-poster.hide {
  opacity: 0;
  pointer-events: none;
}
#design-from-code .video-wrapper .video-container .main-video {
  z-index: 0;
}
@media screen and (max-width: 1320px) {
  #design-from-code .video-wrapper .video-container,
  #design-from-code .video-wrapper .video-container .main-video,
  #design-from-code .video-wrapper .video-container .fake-poster {
    border-radius: 0;
  }
}
#design-from-code .video-wrapper .progress-bar {
  width: 0;
  height: 3px;
  position: absolute;
  bottom: -3px;
  left: 0;
  background-color: #fff;
  text-indent: -9999px;
  transition: bottom 0.3s ease-out, opacity 0.3s ease-out, width 0.5s linear;
}
#design-from-code .play-stop-button {
  width: 100px;
  margin: auto;
  padding: 73px 0 0;
  border: none;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 1;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0);
  box-shadow: none;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
#design-from-code .play-stop-button:before {
  transition: transform 0.5s linear;
}
#design-from-code .play-stop-button:after {
  content: '';
  display: inline-block;
  width: 58px;
  height: 58px;
  margin: auto;
  border: 2px solid #7800FF;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #7800FF;
  transition: background-color 0.2s ease-out;
  box-shadow: 0 5px 30px rgba(120, 0, 255, 0.4);
}
#design-from-code .play-stop-button.play {
  transition: opacity 0.25s linear, transform 0.5s ease-out, visibility 0s linear;
}
#design-from-code .play-stop-button.play:before {
  content: '';
  width: 23px;
  height: 26px;
  background: url('/images/promo-events/design-from-code/arrow-play.svg') no-repeat center;
  background-size: 23px 26px;
  position: absolute;
  top: 29px;
  left: 53%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
#design-from-code .play-stop-button.play:hover:after {
  background-color: rgba(120, 0, 255, 0);
}
#design-from-code .play-stop-button.loading:after {
  border-color: #fff #fff #fff transparent;
  animation: 0.5s linear 0s infinite forwards spinner-button;
}
#design-from-code .play-stop-button.stop {
  opacity: 0;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.25s linear, transform 0.5s ease-out, visibility 0s linear 0.5s;
}
#design-from-code .play-stop-button.stop:before {
  content: "\e906";
  color: #fff;
  font-size: 21px;
  position: absolute;
  top: 19px;
  right: 0;
  left: 0;
  transform: translateX(2px) rotate(-15deg);
  z-index: 1;
}
.video-play#design-from-code .play-stop-button:after {
  box-shadow: none;
}
.video-play#design-from-code .play-stop-button:hover:after {
  background-color: transparent !important;
}
.video-playing#design-from-code .video-wrapper .play-stop-button.play {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s linear, transform 0.5s ease-out, visibility 0s linear 0.5s;
}
.video-playing#design-from-code .video-wrapper .play-stop-button.stop {
  visibility: visible;
  opacity: 0.3;
  top: 90%;
  transition: opacity 0.25s linear, transform 0.5s ease-out, visibility 0s linear;
}
.video-playing#design-from-code .video-wrapper .play-stop-button.stop:hover {
  opacity: 0.7;
}
.video-playing#design-from-code .video-wrapper .play-stop-button.stop:before {
  transform: translateX(2px);
}
.video-playing#design-from-code .video-wrapper .main-video,
.video-playing#design-from-code .video-wrapper .fake-poster {
  border-radius: 0;
}
#design-from-code .content-section {
  display: flex;
  width: 1660px;
  max-width: 100%;
  margin: 0 auto;
  align-content: center;
  position: relative;
}
#design-from-code .content-section:not(.consistency-section):not(.centered-content) .image-wrapper {
  display: flex;
  position: relative;
}
#design-from-code .content-section:not(.consistency-section):not(.centered-content) .image-wrapper img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 100% center;
     object-position: 100% center;
}
#design-from-code .content-section.image-on-right .content-wrapper {
  padding-right: 90px;
}
#design-from-code .content-section.interactive-components-section {
  padding: 151px 0 115px;
}
#design-from-code .content-section.interactive-components-section .content-wrapper {
  display: flex;
  position: relative;
}
#design-from-code .content-section.interactive-components-section .content-wrapper p {
  margin: auto 0 auto auto;
}
@media screen and (max-width: 768px) and (min-width: 414px) {
  #design-from-code .content-section.interactive-components-section .content-wrapper {
    padding-left: 15px;
    padding-right: 50px;
  }
}
#design-from-code .content-section.interactive-components-section .background-square {
  top: -210px;
  left: 309px;
}
#design-from-code .content-section.interactive-components-section .green {
  opacity: 0.9;
  top: -69px;
  left: 318px;
}
#design-from-code .content-section.interactive-components-section .red-pink {
  bottom: -58px;
  left: 591px;
}
#design-from-code .content-section.interactive-components-section .yellow {
  top: 208px;
  right: 354px;
}
@media screen and (max-width: 1660px) and (min-width: 880px) {
  #design-from-code .content-section.interactive-components-section .image-wrapper:after {
    content: '';
    width: 20px;
    position: absolute;
    top: 0;
    right: -20px;
    bottom: 0;
    box-shadow: -20px 0 50px 16px #2b2b2b;
    overflow: visible;
  }
}
@media screen and (max-width: 414px) {
  #design-from-code .content-section.interactive-components-section .image-wrapper {
    padding-right: 0;
    flex-direction: column;
  }
  #design-from-code .content-section.interactive-components-section .image-wrapper .living-component-wrapper,
  #design-from-code .content-section.interactive-components-section .image-wrapper .generated-component {
    margin: 20px auto 40px;
  }
  #design-from-code .content-section.interactive-components-section .image-wrapper .code-wrapper {
    width: auto;
    max-width: 100%;
    min-width: auto;
    margin: 20px 15px auto;
    padding: 15px;
    border-radius: 4px;
    position: relative;
    background: #2b2b2b;
    white-space: nowrap;
    overflow: hidden;
  }
  #design-from-code .content-section.interactive-components-section .image-wrapper .code-wrapper:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    box-shadow: inset -20px 0 50px 16px #2b2b2b;
    pointer-events: none;
  }
}
#design-from-code .content-section.live-code-section .background-square {
  background: #f6f6f6;
  top: -44%;
  left: -17%;
}
#design-from-code .content-section.live-code-section .image-wrapper {
  width: 750px;
  max-width: 750px;
  height: 413px;
  margin-right: 90px;
  padding-right: 0 !important;
  border-radius: 8px;
  position: relative;
  flex-direction: row-reverse;
  background: #fff;
  overflow: hidden;
}
@media screen and (max-width: 414px) {
  #design-from-code .content-section.live-code-section .image-wrapper {
    height: 330px;
  }
}
#design-from-code .content-section.live-code-section .image-wrapper img {
  -o-object-position: 100% top !important;
     object-position: 100% top !important;
}
@media screen and (max-width: 414px) {
  #design-from-code .content-section.live-code-section .image-wrapper {
    max-width: 100%;
  }
  #design-from-code .content-section.live-code-section .content-wrapper {
    margin-top: 40px;
  }
}
#design-from-code .content-section.live-code-section .image-wrapper,
#design-from-code .content-section.centered-content .image-wrapper {
  box-shadow: 5px 0 30px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) and (min-width: 414px) {
  #design-from-code .content-section.live-code-section .content-wrapper,
  #design-from-code .content-section.consistency-section .content-wrapper {
    padding-right: 15px;
  }
}
#design-from-code .content-section.centered-content {
  width: 960px;
  max-width: 100%;
  margin-top: 183px;
  position: relative;
  flex-direction: column;
  text-align: center;
}
#design-from-code .content-section.centered-content .content-wrapper,
#design-from-code .content-section.centered-content .image-wrapper {
  width: auto;
  width: initial;
  flex-basis: initial;
}
#design-from-code .content-section.centered-content .content-wrapper {
  width: 750px;
  max-width: 100%;
  margin-bottom: 79px;
}
@media screen and (max-width: 414px) {
  #design-from-code .content-section.centered-content .content-wrapper {
    margin-bottom: 40px;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
#design-from-code .content-section.centered-content .image-wrapper img {
  max-width: 100%;
}
#design-from-code .content-section.centered-content .lime {
  top: 275px;
  right: -101px;
}
#design-from-code .content-section.centered-content .light-blue {
  top: -47px;
  left: -365px;
}
#design-from-code .content-section .content-wrapper,
#design-from-code .content-section .image-wrapper {
  width: 50%;
  margin: auto;
  flex-grow: 0;
  flex-basis: 50%;
}
#design-from-code .content-section .content-wrapper {
  font-family: 'Roboto Mono', monospace;
  font-size: 24px;
  font-weight: 300;
  line-height: 36px;
}
#design-from-code .content-section.consistency-section .image-wrapper {
  display: flex;
  padding-right: 90px;
  align-items: center;
  flex-direction: row-reverse;
}
#design-from-code .content-section.consistency-section .image-wrapper > img,
#design-from-code .content-section.consistency-section .image-wrapper .github-image-wrapper {
  margin: auto;
}
#design-from-code .content-section.consistency-section .image-wrapper .design-libraries {
  margin-left: 0;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(43, 43, 43, 0.1);
}
#design-from-code .content-section.consistency-section .image-wrapper .icon-sync {
  margin: auto 27px;
}
#design-from-code .content-section.consistency-section .image-wrapper .github-image-wrapper {
  margin-right: 0;
  position: relative;
}
#design-from-code .content-section.consistency-section .image-wrapper .github-image-wrapper > img {
  border-radius: 4px;
  box-shadow: 10px 0 40px rgba(43, 43, 43, 0.1);
}
#design-from-code .content-section.consistency-section .image-wrapper .github-image-wrapper .github-icon-wrapper {
  display: flex;
  width: 89px;
  height: 88px;
  border-radius: 50%;
  position: absolute;
  right: 53px;
  bottom: -44px;
  align-items: center;
  background: #fff;
  box-shadow: 0 25px 30px rgba(35, 39, 56, 0.2);
}
#design-from-code .content-section.consistency-section .image-wrapper .github-image-wrapper .github-icon-wrapper img {
  margin: auto;
}
@media screen and (max-width: 414px) {
  #design-from-code .content-section.consistency-section .image-wrapper {
    padding-right: 0;
  }
  #design-from-code .content-section.consistency-section .content-wrapper {
    margin-top: 100px;
  }
}
@media screen and (max-width: 414px) {
  #design-from-code .content-section,
  #design-from-code .content-section.image-on-right {
    flex-direction: column;
  }
  #design-from-code .content-section .content-wrapper,
  #design-from-code .content-section.image-on-right .content-wrapper,
  #design-from-code .content-section .image-wrapper,
  #design-from-code .content-section.image-on-right .image-wrapper {
    width: 100%;
    margin: 0;
    flex-basis: initial;
  }
  #design-from-code .content-section .content-wrapper,
  #design-from-code .content-section.image-on-right .content-wrapper {
    padding-right: 15px !important;
    padding-left: 15px !important;
    text-align: left;
  }
  #design-from-code .content-section .content-wrapper br,
  #design-from-code .content-section.image-on-right .content-wrapper br {
    display: none;
  }
}
#design-from-code .background-square {
  width: 792px;
  height: 792px;
  border-radius: 20px;
  position: absolute;
  z-index: -1;
  transform: rotate(45deg);
  background: #2b2b2b;
}
#design-from-code .code-wrapper {
  width: 400px;
  min-width: 400px;
  margin-left: 60px;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  line-height: 30px;
}
#design-from-code .code-wrapper .prop,
#design-from-code .code-wrapper .inner-component {
  padding-left: 18px;
}
#design-from-code .code-wrapper .tag-wrapper:before,
#design-from-code .code-wrapper .prop-name:before,
#design-from-code .code-wrapper .prop-content:before,
#design-from-code .code-wrapper .value:before,
#design-from-code .code-wrapper .inner-component:before,
#design-from-code .code-wrapper .closing-tag:before,
#design-from-code .code-wrapper .tag-wrapper:after,
#design-from-code .code-wrapper .prop-name:after,
#design-from-code .code-wrapper .prop-content:after,
#design-from-code .code-wrapper .value:after,
#design-from-code .code-wrapper .inner-component:after,
#design-from-code .code-wrapper .closing-tag:after {
  color: #fff;
}
#design-from-code .code-wrapper .tag-wrapper {
  color: #32ff59;
}
#design-from-code .code-wrapper .tag-wrapper:before {
  content: "<";
}
#design-from-code .code-wrapper .tag-wrapper:last-of-type:before {
  content: "</";
}
#design-from-code .code-wrapper .tag-wrapper:last-of-type:after {
  content: ">";
}
#design-from-code .code-wrapper .prop-name {
  color: #64fffd;
}
#design-from-code .code-wrapper .prop-name:after {
  content: "=";
}
#design-from-code .code-wrapper .prop-content {
  color: #ff773b;
}
#design-from-code .code-wrapper .prop-content.boolean {
  color: #f57bfd;
}
#design-from-code .code-wrapper .prop-content.boolean:before {
  content: "{";
}
#design-from-code .code-wrapper .prop-content.boolean:after {
  content: "}";
}
#design-from-code .code-wrapper .inner-component {
  color: #fff;
}
#design-from-code .code-wrapper .inner-component:not(.button-component):not(.paragraph):after {
  content: " />";
}
#design-from-code .code-wrapper .inner-component.paragraph .tag-wrapper:before {
  content: '<';
}
#design-from-code .code-wrapper .inner-component.paragraph .tag-wrapper:after {
  content: '>';
}
#design-from-code .code-wrapper .inner-component.paragraph .tag-wrapper:last-of-type:before {
  content: '</';
}
#design-from-code .code-wrapper .inner-component.paragraph .tag-wrapper:last-of-type:after {
  content: '>';
}
#design-from-code .code-wrapper .value {
  color: #dbff32;
}
#design-from-code .code-wrapper .value:before {
  content: "{";
}
#design-from-code .code-wrapper .value:after {
  content: "}";
}
#design-from-code .code-wrapper .closing-tag:after {
  content: ">";
}
#design-from-code .code-wrapper .indented-line {
  padding-left: 24px;
}
#design-from-code .code-wrapper .button-component .prop {
  display: inline-block;
  padding-left: 9px;
}
#design-from-code .hbspt {
  margin-top: 0;
  position: relative;
}
#design-from-code .hbspt + .success-message {
  display: none;
}
#design-from-code .hbspt.success .submitted-message {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-out 0s;
}
#design-from-code .hbspt .submitted-message {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  margin-top: 95px;
  color: #63ad0e !important;
  font-size: 18px !important;
}
#design-from-code .form-container {
  width: 500px;
}
#design-from-code .join {
  padding-top: 154px;
  position: static;
  text-align: center;
}
#design-from-code .join:before {
  display: none;
}
#design-from-code .join h2 {
  max-width: 580px;
  margin: 0 auto 48px;
  color: #2b2b2b;
  font-size: 26px;
  font-weight: 800;
}
#design-from-code .webinar {
  display: flex;
  height: 700px;
  padding-top: 154px;
  position: relative;
  align-items: center;
  flex-direction: column;
  background-color: #2b2b2b;
  background-image: linear-gradient(180deg, rgba(43, 43, 43, 0) 50%, #2b2b2b 80%), url('/images/promo-events/design-from-code/webinar-bg.jpg');
  background-repeat: no-repeat;
  background-position: center 0, center -40px;
  background-size: cover;
  color: #fff;
  text-align: center;
}
#design-from-code .webinar:before,
#design-from-code .webinar:after {
  content: '';
  display: block;
  height: 13px;
  border-radius: 6px;
  position: absolute;
}
#design-from-code .webinar:before {
  width: 135px;
  top: 118px;
  left: 23%;
  background-image: linear-gradient(90deg, #4d20d4, #20bfd4);
}
#design-from-code .webinar:after {
  width: 72px;
  right: 23%;
  bottom: 280px;
  background-image: linear-gradient(90deg, #11a9bd, #006cff);
}
#design-from-code .webinar .webinar-title {
  max-width: 530px;
  margin-bottom: 85px;
  position: relative;
  font-size: 40px;
  font-weight: 400;
  line-height: 100%;
}
#design-from-code .webinar .webinar-title:after {
  -o-border-image: none;
     border-image: none;
  border-top: none;
  border-right: 6px solid #003db2;
  border-bottom: none;
  border-left: 6px solid #004fe6;
  background-image: linear-gradient(90deg, #004fe6, #003db2), linear-gradient(90deg, #004fe6, #003db2);
  background-size: 100% 6px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  content: '';
  width: 190px;
  height: 190px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#design-from-code .webinar .webinar-title .text {
  display: block;
  position: relative;
  z-index: 1;
}
#design-from-code .webinar .webinar-title strong {
  display: block;
  font-weight: 800;
}
#design-from-code .webinar .webinar-subtitle {
  max-width: 510px;
  margin: 35px;
  font-size: 22px;
  line-height: 26px;
}
#design-from-code .webinar .btn {
  width: 173px;
  border-color: #fff;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
#design-from-code .webinar .btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#design-from-code .webinar .footer {
  display: flex;
  width: 100%;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 10px;
  padding-left: 10px;
  position: absolute;
  right: 0;
  bottom: 48px;
  left: 0;
  align-items: flex-end;
  justify-content: space-between;
}
#design-from-code .webinar .footer .copyright {
  color: #b3b3b3;
  font-size: 11px;
  line-height: 100%;
}
#design-from-code .webinar .footer .logo {
  border-color: #fff;
  background-color: #fff;
}
@media screen and (max-width: 736px) {
  #design-from-code .webinar .webinar-title {
    font-size: 30px;
  }
  #design-from-code .webinar .webinar-subtitle {
    font-size: 16px;
    line-height: 20px;
  }
}
#design-from-code .main-footer {
  padding-top: 0;
  background: #fff;
  text-align: center;
}
#design-from-code .main-footer:after {
  display: none;
}
#design-from-code .main-footer .additional-info {
  padding-top: 4px;
  padding-bottom: 122px;
  color: #dadada;
  font-size: 14px;
}
@media screen and (max-width: 414px) {
  #design-from-code .main-footer .additional-info {
    padding-bottom: 32px;
  }
}
#design-from-code .main-footer .logo-wrapper {
  display: inline-flex;
  margin-bottom: 24px;
}
#design-from-code .main-footer .logo {
  opacity: 1;
  border-color: #dadada;
  background-color: #dadada;
}
#design-from-code .color-bar {
  width: 100px;
  height: 14px;
  border-radius: 7px;
  position: absolute;
  pointer-events: none;
}
#design-from-code .color-bar.green {
  background: linear-gradient(to right, #19ffc1, #19fff5);
}
#design-from-code .color-bar.violet {
  background: linear-gradient(to right, #a000ff, #2b00ff);
}
#design-from-code .color-bar.pink {
  background: linear-gradient(to right, #8d33ff, #ec33ff);
}
#design-from-code .color-bar.orange {
  background: linear-gradient(to right, #ff2519, #ff6c19);
}
#design-from-code .color-bar.blue {
  background: linear-gradient(to right, #333fff, #33caff);
}
#design-from-code .color-bar.light-blue {
  background: linear-gradient(to right, #32a3fe, #33ffff);
}
#design-from-code .color-bar.yellow {
  background: linear-gradient(to right, #ffb733, #ffff33);
}
#design-from-code .color-bar.lime {
  background: linear-gradient(to right, #d9ff00, #03ff00);
}
#design-from-code .color-bar.red-pink {
  background: linear-gradient(to right, #ea0434, #ea04ea);
}
#design-from-code .color-bar-l {
  width: 200px;
}
#design-from-code .color-bar-xl {
  width: 400px;
}
@keyframes spinner-button {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
#design-from-code .living-component-wrapper {
  margin: auto auto auto 0;
  color: #72707c;
  font-size: 16px;
  line-height: 24px;
}
#design-from-code .living-component-wrapper main {
  flex: 0 1 auto;
  margin: auto;
  position: relative;
}
#design-from-code .living-component-wrapper main article {
  border-radius: 6px;
  background-color: #FFF;
  box-shadow: 0px 10px 40px 0px rgba(34, 34, 34, 0.1);
  width: 320px;
  height: 240px;
  z-index: 98;
  padding: 28px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
}
#design-from-code .living-component-wrapper figure {
  background-color: #000;
  display: block;
  height: 0;
  transition: height 0.2s ease-in-out;
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  right: 0;
  padding-left: 50px;
}
#design-from-code .living-component-wrapper figure figcaption {
  color: rgba(255, 255, 255, 0.9);
  display: block;
  padding: 15px 0 0 15px;
  font-size: 14px;
}
#design-from-code .living-component-wrapper figure figcaption strong {
  font-weight: 400;
  position: relative;
  margin-right: 24px;
}
#design-from-code .living-component-wrapper figure figcaption strong:after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  right: -15px;
  top: 7px;
  display: none;
}
#design-from-code .living-component-wrapper figure figcaption small {
  font-size: 14px;
  display: none;
}
#design-from-code .living-component-wrapper figure .progress {
  width: 100%;
  height: 5px;
  background-color: #FFF;
  display: block;
  position: absolute;
  left: 0;
  top: -5px;
  transition: top 0.2s ease-in-out 0.3s;
  z-index: 21;
}
#design-from-code .living-component-wrapper figure .progress:after {
  content: '';
  width: 0;
  height: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #1639d0;
}
#design-from-code .living-component-wrapper figure .img {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  background: url('/images/promo-events/design-from-code/cover.png') no-repeat center center;
  background-size: cover;
}
#design-from-code .living-component-wrapper label {
  border-radius: 100%;
  background-color: #1639d0;
  box-shadow: 0px 5px 30px 0px rgba(0, 108, 255, 0.4);
  position: absolute;
  width: 50px;
  height: 50px;
  right: 136px;
  bottom: -26px;
  z-index: 5;
  cursor: pointer;
  transition: border-radius 0.2s ease-in-out, right 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out, bottom 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
}
#design-from-code .living-component-wrapper label .play {
  width: 17px;
  height: 20px;
  flex: 0 1 auto;
  margin: auto;
  display: block;
  position: relative;
  left: 2px;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
#design-from-code .living-component-wrapper label:after {
  content: '';
  width: 8px;
  background-color: #FFF;
  height: 8px;
  border-radius: 1px;
  flex: 0 1 auto;
  margin: auto;
  display: none;
}
#design-from-code .living-component-wrapper h1 {
  font-size: 21px;
  font-weight: 700;
  color: #3e3955;
  margin-bottom: 5px;
}
#design-from-code .living-component-wrapper h2 {
  font-size: 17px;
  font-weight: 400;
  color: #8e8c97;
  margin-bottom: 5px;
}
#design-from-code .living-component-wrapper ul {
  display: block;
  margin-bottom: 16px;
}
#design-from-code .living-component-wrapper ul li {
  list-style: none;
  display: inline-block;
}
#design-from-code .living-component-wrapper p {
  transition: opacity 0.2s ease-in-out;
}
#design-from-code .living-component-wrapper input {
  display: none;
}
#design-from-code .living-component-wrapper input:checked ~ main article {
  height: 180px;
}
#design-from-code .living-component-wrapper input:checked ~ main figure {
  height: 50px;
}
#design-from-code .living-component-wrapper input:checked ~ main p {
  opacity: 0;
}
#design-from-code .living-component-wrapper input:checked ~ main figure .progress {
  top: 0;
}
#design-from-code .living-component-wrapper input:checked ~ main figure .progress:after {
  animation: progress 30s infinite 1s;
}
#design-from-code .living-component-wrapper input:checked ~ main label {
  width: 20px;
  height: 20px;
  right: 10px;
  bottom: 13px;
  border-radius: 8px;
  box-shadow: rgba(0, 108, 255, 0.8);
}
#design-from-code .living-component-wrapper input:checked ~ main label .play {
  display: none;
}
#design-from-code .living-component-wrapper input:checked ~ main label:after {
  display: block;
}
@keyframes progress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
#design-from-code .living-component-wrapper .popularity,
#design-from-code .living-component-wrapper .date {
  margin-left: 9px;
}
#design-from-code .living-component-wrapper .popularity:before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 10px;
  background: repeating-linear-gradient(to right, #aae316, #aae316 2px, #fff 2px, #fff 3px, #aae316 3px, #aae316 5px, #fff 5px, #fff 6px, #aae316 6px, #aae316 8px, #fff 8px, #fff 9px, #bfbdc8 9px, #bfbdc8 11px, #fff 11px, #fff 12px, #bfbdc8 12px, #bfbdc8 14px);
}
#design-from-code .living-component-wrapper .popularity:before,
#design-from-code .living-component-wrapper .time:before,
#design-from-code .living-component-wrapper .date:before {
  content: '';
  display: inline-block;
  margin-right: 7px;
  position: relative;
}
#design-from-code .living-component-wrapper .time:before {
  width: 16px;
  height: 18px;
  top: 4px;
  background: url('/images/promo-events/design-from-code/icon-time.svg') no-repeat center;
  background-size: 16px 18px;
}
#design-from-code .living-component-wrapper .date:before {
  width: 13px;
  height: 13px;
  top: 1px;
  background: url('/images/promo-events/design-from-code/icon-calendar.svg') no-repeat center;
  background-size: 13px 13px;
}
@media screen and (max-width: 736px) {
  .homepage .top-bar {
    position: absolute;
  }
}
@media screen and (max-width: 736px) {
  .homepage .top-bar .logo {
    display: none;
  }
}
.homepage .main-section {
  height: 90vh;
  padding-top: 30px;
}
.homepage .banners {
  margin-top: 52px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
}
@media screen and (max-width: 1280px) {
  .homepage .banners {
    margin-top: 42px;
    margin-bottom: 66px;
  }
}
@media screen and (max-width: 800px) {
  .homepage .banners {
    margin-top: 36px;
    margin-bottom: 57px;
  }
}
@media screen and (max-width: 736px) {
  .homepage .banners {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
}
.homepage .banners ul {
  margin-bottom: 0;
}
.homepage .testimonials {
  margin-bottom: 45px;
}
@media screen and (max-width: 1280px) {
  .homepage .testimonials {
    margin-bottom: 36px;
  }
}
@media screen and (max-width: 800px) {
  .homepage .testimonials {
    margin-bottom: 32px;
  }
}
@media screen and (max-width: 736px) {
  .homepage .testimonials {
    margin-bottom: 20px;
  }
}
#page-sign-up .sign-up-container {
  -webkit-app-region: drag;
  display: flex;
  min-height: 100vh;
  flex-direction: row-reverse;
}
#page-sign-up .sign-up-container * {
  -webkit-app-region: no-drag;
}
#page-sign-up .logo-wrapper {
  position: absolute;
  top: 50px;
  left: 50px;
}
@media screen and (max-width: 1024px) {
  #page-sign-up .logo-wrapper {
    top: 20px;
    left: 20px;
  }
}
#page-sign-up .logo {
  width: 60px;
  height: 60px;
  border-color: #2b2b2b;
  background-color: #2b2b2b;
  background-size: 60px;
}
#page-sign-up .sign-up-content {
  display: flex;
  padding: 50px;
  position: relative;
  flex: 1 1 1040px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  #page-sign-up .sign-up-content {
    padding-top: 100px;
  }
}
#page-sign-up .title {
  font-size: 30px;
  color: #515151;
  font-weight: 300;
  line-height: 36px;
  margin-bottom: 8px;
}
#page-sign-up .subtitle {
  font-size: 18px;
  color: #b3b3b3;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 32px;
}
#page-sign-up .testimonials-container {
  flex: 0 1 400px;
  position: relative;
  background-color: #2b2b2b;
  color: #fff;
}
@media screen and (max-width: 1024px) {
  #page-sign-up .testimonials-container {
    display: none;
  }
}
#page-sign-up .slider {
  margin-bottom: 0;
  position: relative;
}
#page-sign-up .slider,
#page-sign-up .slider .slide {
  width: 100%;
  height: 100%;
}
#page-sign-up .slider .slide {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.6s ease-in-out;
}
#page-sign-up .slider .slide.active {
  opacity: 1;
  transition-delay: 0.4s;
}
#page-sign-up .slider .slide .background img {
  width: 100%;
  height: auto;
}
#page-sign-up .slider-dots {
  display: flex;
  position: absolute;
  bottom: 50px;
  left: 50px;
}
#page-sign-up .slider-dots .dot {
  opacity: 0.3;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  transition: opacity 0.8s ease-out 0.3s, background-color 0.8s ease-out 0.3s;
}
#page-sign-up .slider-dots .dot:hover {
  opacity: 0.5;
}
#page-sign-up .slider-dots .dot.active {
  opacity: 1;
  background-color: #fff;
}
#page-sign-up .testimonial {
  font-size: 16px;
  line-height: 24px;
  display: flex;
  position: absolute;
  right: 50px;
  bottom: 40px;
  left: 50px;
  flex-direction: column;
  color: #cdcdcd;
}
#page-sign-up .testimonial .person {
  display: flex;
  margin: 15px;
  align-items: flex-end;
  flex-direction: column-reverse;
}
#page-sign-up .testimonial .person .name {
  margin-bottom: 9px;
}
#page-sign-up.desktop-app .title {
  font-size: 36px;
  color: #373737;
  font-weight: 800;
  line-height: 40px;
  margin-bottom: 17px;
}
#page-sign-up.desktop-app .subtitle {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 46px;
  color: #919191;
}
#page-sign-up.desktop-app .signup-legal-note {
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
}
#page-sign-up.desktop-app .log-in-link:after {
  border-color: #919191;
}
#page-sign-up.desktop-app .lonely-dot.invisible {
  opacity: 0;
}
.page-pricing {
  padding-top: 168px;
}
@media screen and (max-width: 800px) {
  .page-pricing .top-bar {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 736px) {
  .page-pricing {
    padding-top: 0;
  }
}
.page-pricing .container {
  max-width: 1260px;
}
.page-pricing .heading-major {
  text-align: center;
}
.page-pricing .heading-major .title {
  color: #373737;
}
@media screen and (max-width: 1280px) {
  .page-pricing .heading-major .title {
    font-size: 48px;
  }
}
@media screen and (max-width: 800px) {
  .page-pricing .heading-major .title {
    font-size: 42px;
  }
}
@media screen and (max-width: 736px) {
  .page-pricing .heading-major .title {
    font-size: 30px;
  }
}
.page-pricing .heading-major .title:not(:only-child) {
  margin-bottom: 28px;
}
@media screen and (max-width: 1280px) {
  .page-pricing .heading-major .title:not(:only-child) {
    margin-bottom: 26px;
  }
}
@media screen and (max-width: 800px) {
  .page-pricing .heading-major .title:not(:only-child) {
    margin-bottom: 23px;
  }
}
@media screen and (max-width: 736px) {
  .page-pricing .heading-major .title:not(:only-child) {
    margin-bottom: 15px;
  }
}
.page-pricing .heading-major .subtitle {
  color: #6a6a6a;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
@media screen and (max-width: 736px) {
  .page-pricing .heading-major .subtitle {
    font-size: 16px;
    line-height: 19px;
  }
}
.page-pricing .pricing-table {
  margin-top: 31px;
  margin-bottom: 84px;
}
@media screen and (max-width: 1280px) {
  .page-pricing .pricing-table {
    margin-bottom: 67px;
  }
}
@media screen and (max-width: 800px) {
  .page-pricing .pricing-table {
    margin-bottom: 59px;
  }
}
@media screen and (max-width: 736px) {
  .page-pricing .pricing-table {
    margin-top: 20px;
  }
}
.page-pricing .comparison-table {
  padding-top: 77px;
  padding-bottom: 100px;
  position: relative;
}
@media screen and (max-width: 1280px) {
  .page-pricing .comparison-table {
    padding-top: 62px;
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 800px) {
  .page-pricing .comparison-table {
    padding-top: 54px;
    padding-bottom: 70px;
  }
}
@media screen and (max-width: 736px) {
  .page-pricing .comparison-table {
    display: none;
  }
}
.page-pricing .comparison-table:before {
  content: '';
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  background: #f7f7f7;
  pointer-events: none;
}
.page-pricing .faq {
  margin-top: 105px;
  margin-bottom: 105px;
}
@media screen and (max-width: 1280px) {
  .page-pricing .faq {
    margin-top: 84px;
    margin-bottom: 84px;
  }
}
@media screen and (max-width: 800px) {
  .page-pricing .faq {
    margin-top: 74px;
    margin-bottom: 74px;
  }
}
@media screen and (max-width: 736px) {
  .page-pricing .faq {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
.page-pricing .request-demo {
  padding-top: 81px;
  padding-bottom: 52px;
}
@media screen and (max-width: 1280px) {
  .page-pricing .request-demo {
    padding-top: 65px;
    padding-bottom: 42px;
  }
}
@media screen and (max-width: 800px) {
  .page-pricing .request-demo {
    padding-top: 40px;
    padding-bottom: 25px;
  }
}
.page-pricing .request-demo .testimonials {
  margin-top: 0;
  padding: 0;
}
.page-pricing.page-pricing-test .container {
  max-width: 1260px;
}
.page-pricing.page-pricing-test .pricing-table {
  margin-top: 74px;
  margin-bottom: 0;
  box-shadow: 0 0 75px rgba(0, 0, 0, 0.1);
}
@media (max-width: 736px) {
  .page-pricing.page-pricing-test .pricing-table {
    margin-top: 20px;
    box-shadow: none;
  }
}
.page-pricing.page-pricing-test .pricing-table .heading-wrapper {
  min-height: 111px;
}
.page-pricing.page-pricing-test .pricing-table .heading-wrapper .heading {
  margin-top: 5px;
  margin-bottom: 4px;
}
.page-pricing.page-pricing-test .pricing-table .heading-wrapper .title {
  font-size: 24px;
}
.page-pricing.page-pricing-test .pricing-table .heading-wrapper .description {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 22px;
}
@media (max-width: 736px) {
  .page-pricing.page-pricing-test .pricing-table .heading-wrapper {
    min-height: 0;
    min-height: initial;
  }
}
.page-pricing.page-pricing-test .pricing-table .column {
  display: flex;
  width: 25%;
  margin-top: 0;
  padding: 28px 23px 20px;
  flex-direction: column;
  background: #fff;
}
@media (max-width: 736px) {
  .page-pricing.page-pricing-test .pricing-table .column {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .page-pricing.page-pricing-test .pricing-table .column + .column {
    margin-top: 10px;
    margin-bottom: 0;
  }
  .page-pricing.page-pricing-test .pricing-table .column:last-of-type {
    margin-top: 50px;
  }
}
.page-pricing.page-pricing-test .pricing-table .column:first-of-type {
  border-right: 1px solid #e6e6e6;
}
.page-pricing.page-pricing-test .pricing-table .column:last-of-type .additional-info {
  margin-bottom: 34px;
  padding-top: 1px;
}
.page-pricing.page-pricing-test .pricing-table .column:last-of-type .description {
  margin-bottom: 11px;
}
.page-pricing.page-pricing-test .pricing-table .column:last-of-type .features {
  padding-bottom: 6px;
}
.page-pricing.page-pricing-test .pricing-table .column.main {
  margin-top: -10px;
  margin-bottom: -20px;
  padding-top: 22px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
@media (max-width: 736px) {
  .page-pricing.page-pricing-test .pricing-table .column.main {
    margin-top: 66px;
    box-shadow: none;
  }
}
.page-pricing.page-pricing-test .pricing-table .column.main .description {
  margin-bottom: 28px;
  padding-right: 10px;
}
.page-pricing.page-pricing-test .pricing-table .column.main .features {
  padding-bottom: 10px;
}
.page-pricing.page-pricing-test .pricing-table .column .paid-options {
  display: none;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 0;
  padding: 0 0 35px 0;
  border-bottom: 1px solid #f3f3f3;
}
@media (max-width: 736px) {
  .page-pricing.page-pricing-test .pricing-table .column .paid-options {
    display: block;
  }
}
.page-pricing.page-pricing-test .pricing-table .column .pricing .price {
  font-size: 24px;
}
.page-pricing.page-pricing-test .pricing-table .column .pricing .billing-info {
  display: none;
  margin-top: 5px;
  color: #a6a6a6;
  font-size: 12px;
  line-height: 100%;
}
.page-pricing.page-pricing-test .pricing-table .column .additional-info {
  font-size: 24px;
}
.page-pricing.page-pricing-test .pricing-table .column .pricing,
.page-pricing.page-pricing-test .pricing-table .column .addtitional-info {
  margin-bottom: 17px;
  font-size: 24px;
}
.page-pricing.page-pricing-test .pricing-table .column .features {
  padding-bottom: 22px;
}
.page-pricing.page-pricing-test .pricing-table .column .features .content {
  display: block;
  margin-bottom: 10px;
  padding-left: 10px;
  position: relative;
  line-height: 20px;
}
.page-pricing.page-pricing-test .pricing-table .column .features .content:before {
  content: '\2022';
  padding-right: 5px;
  position: absolute;
  top: -1px;
  left: 0;
  line-height: 18px;
}
.page-pricing.page-pricing-test .pricing-table .column .features .content:hover span {
  background: none;
}
.page-pricing.page-pricing-test .pricing-table .column .features .content span {
  border: none;
  background-image: linear-gradient(to right, #dadada 0, #dadada 1px, transparent 1px, transparent 2px);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 2px 1px;
}
.page-pricing.page-pricing-test .pricing-table .column .btn-ghost,
.page-pricing.page-pricing-test .pricing-table .column .btn-solid {
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
}
.page-pricing.page-pricing-test .pricing-table.test .column {
  height: 440px;
  padding: 28px 20px 20px !important;
  position: relative;
}
.page-pricing.page-pricing-test .pricing-table.test .column.main {
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 0 0 81px 0 rgba(0, 0, 0, 0.06), inset 0 -48px 60px -17px rgba(0, 0, 0, 0.0028);
}
.page-pricing.page-pricing-test .pricing-table.test .column .heading-wrapper {
  min-height: 0;
  min-height: initial;
}
.page-pricing.page-pricing-test .pricing-table.test .column .description {
  margin-bottom: 13px !important;
  padding-right: 0;
}
.page-pricing.page-pricing-test .pricing-table.test .column .pricing {
  margin-bottom: 19px;
}
.page-pricing.page-pricing-test .pricing-table.test .column .btn-ghost,
.page-pricing.page-pricing-test .pricing-table.test .column .btn-solid {
  width: 85%;
  position: absolute;
  bottom: 20px;
}
.page-pricing.page-pricing-test .paid-options-wrapper {
  display: flex;
  align-items: flex-start;
}
@media (max-width: 736px) {
  .page-pricing.page-pricing-test .paid-options-wrapper {
    display: none;
  }
}
.page-pricing.page-pricing-test .paid-options {
  width: 25%;
  margin-top: 13px;
  padding-right: 23px;
  padding-left: 23px;
}
.page-pricing.page-pricing-test .paid-options .addons-heading-wrapper {
  margin-bottom: 7px;
}
.page-pricing.page-pricing-test .paid-options .addons-heading-wrapper .addons-heading {
  padding-bottom: 2px;
  color: #919191;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
.page-pricing.page-pricing-test .paid-options .option {
  display: flex;
  position: relative;
  align-items: center;
  font-size: 14px;
}
.page-pricing.page-pricing-test .paid-options .option:not(:last-child) {
  margin-bottom: 1px;
}
.page-pricing.page-pricing-test .paid-options .option-label[data-show-node='cloud'] {
  border: none;
  background-image: linear-gradient(to right, #dadada 0, #dadada 1px, transparent 1px, transparent 2px);
  background-repeat: repeat-x;
  background-position: 0 80%;
  background-size: 2px 1px;
}
.page-pricing.page-pricing-test .paid-options .option-label[data-show-node='cloud']:hover {
  background: none;
}
.page-pricing.page-pricing-test .paid-options .option-label .cloud {
  color: #fff;
  z-index: 1;
  pointer-events: none;
}
.page-pricing.page-pricing-test .paid-options .badge {
  display: none;
  height: 20px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 3px;
  background-color: #f6f6f6;
  color: #919191;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  pointer-events: none;
}
.page-pricing.page-pricing-test .pricing-table-annotation {
  width: 100%;
  margin-top: 70px;
  color: #919191;
  font-size: 11px;
  text-align: center;
}
.page-product .features {
  padding-top: 41px;
  border-bottom: 1px solid #f6f6f6;
}
@media screen and (max-width: 736px) {
  .page-product .features {
    padding-top: 20px;
    padding-bottom: 0;
  }
}
.page-product .testimonials {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 17px;
  padding-bottom: 49px;
}
@media screen and (max-width: 1280px) {
  .page-product .testimonials {
    padding-bottom: 39px;
  }
}
@media screen and (max-width: 800px) {
  .page-product .testimonials {
    padding-bottom: 34px;
  }
}
@media screen and (max-width: 736px) {
  .page-product .testimonials {
    padding-bottom: 20px;
  }
}
.page-product .testimonials.with-separator:not(:last-child):before {
  top: auto;
  bottom: 0;
  background: #f6f6f6;
}
.page-product .explore-systems {
  padding-top: 86px;
  border-top: 1px solid #f6f6f6;
}
@media screen and (max-width: 1280px) {
  .page-product .explore-systems {
    padding-top: 69px;
  }
}
@media screen and (max-width: 800px) {
  .page-product .explore-systems {
    padding-top: 60px;
  }
}
@media screen and (max-width: 736px) {
  .page-product .explore-systems {
    padding-top: 50px;
    padding-bottom: 36px;
  }
}
.page-product .uxpin-info {
  padding-top: 87px;
  padding-bottom: 0;
}
@media screen and (max-width: 736px) {
  .page-product .uxpin-info {
    padding-top: 50px;
  }
}
.page-product .uxpin-info .header {
  margin-bottom: 18px;
}
.page-product .uxpin-info .features li {
  width: 33.3%;
  max-width: 392px;
  padding-right: 10px;
  padding-left: 10px;
}
@media screen and (max-width: 736px) {
  .page-product .uxpin-info .features li {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
}
#comparison-page .comparison-table {
  margin-top: 47px;
}
@media screen and (max-width: 1280px) {
  #comparison-page .comparison-table {
    margin-top: 40px;
  }
}
#comparison-page .content .section {
  padding-top: 146px;
  padding-bottom: 146px;
}
@media screen and (max-width: 1280px) {
  #comparison-page .content .section {
    padding-top: 117px;
    padding-bottom: 117px;
  }
}
@media screen and (max-width: 800px) {
  #comparison-page .content .section {
    padding-top: 102px;
    padding-bottom: 102px;
  }
}
@media screen and (max-width: 736px) {
  #comparison-page .content .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
#comparison-page .content .section:first-of-type {
  padding-top: 110px;
}
@media screen and (max-width: 1280px) {
  #comparison-page .content .section:first-of-type {
    padding-top: 88px;
  }
}
@media screen and (max-width: 800px) {
  #comparison-page .content .section:first-of-type {
    padding-top: 77px;
  }
}
@media screen and (max-width: 736px) {
  #comparison-page .content .section:first-of-type {
    padding-top: 40px;
  }
}
#comparison-page .content .section:nth-of-type(even) .description {
  max-width: 43.1%;
}
#comparison-page .customer-stories {
  margin-top: 20px;
}
#comparison-page .customer-stories:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
}
#comparison-page .customer-stories .heading-section {
  margin-bottom: 90px;
}
@media screen and (max-width: 1280px) {
  #comparison-page .customer-stories .heading-section {
    margin-bottom: 72px;
  }
}
@media screen and (max-width: 800px) {
  #comparison-page .customer-stories .heading-section {
    margin-bottom: 63px;
  }
}
@media screen and (max-width: 736px) {
  #comparison-page .customer-stories .heading-section {
    margin-bottom: 20px;
  }
}
#comparison-page .banners {
  margin-top: 50px;
  padding-bottom: 28px;
}
@media screen and (max-width: 1280px) {
  #comparison-page .banners {
    margin-top: 40px;
  }
}
@media screen and (max-width: 736px) {
  #comparison-page .banners {
    margin-top: 25px;
  }
}
#comparison-page .testimonials {
  margin-top: 0;
  margin-bottom: 23px;
  padding-top: 17px;
}
#error {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#error .logo {
  opacity: 0.2;
  position: fixed;
  top: 20px;
  left: 20px;
}
#error .logo:hover {
  opacity: 0.3;
}
#error .content {
  display: flex;
  margin-top: 180px;
  position: relative;
  align-items: center;
  flex-direction: column;
}
#error .content .planet-image {
  position: absolute;
  top: -242px;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  pointer-events: none;
}
#error .content .heading {
  text-align: center;
}
#error .content .heading .title {
  margin-bottom: 22px;
  color: #2b2b2b;
  font-size: 120px;
}
@media screen and (max-width: 736px) {
  #error .content .heading .title {
    font-size: 84px;
  }
}
#error .content .heading .subtitle {
  max-width: 770px;
  padding-right: 10px;
  padding-left: 10px;
  color: #919191;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
#error .content .heading .btn-solid {
  max-width: 215px;
  margin: 38px auto 0 auto;
}
.page-testimonials .main-header {
  padding-top: 92px;
}
@media screen and (max-width: 736px) {
  .page-testimonials .main-header {
    padding-top: 158px;
  }
}
.page-testimonials .main-header .heading-major {
  margin-bottom: 40px;
}
.page-testimonials .testimonials {
  margin-top: 36px;
}
@media screen and (max-width: 1280px) {
  .page-testimonials .testimonials {
    margin-top: 29px;
  }
}
@media screen and (max-width: 800px) {
  .page-testimonials .testimonials {
    margin-top: 25px;
  }
}
.page-testimonials .banners {
  padding-top: 57px;
  padding-bottom: 36px;
}
@media screen and (max-width: 1280px) {
  .page-testimonials .banners {
    padding-top: 45px;
    padding-bottom: 29px;
  }
}
@media screen and (max-width: 800px) {
  .page-testimonials .banners {
    padding-top: 40px;
    padding-bottom: 25px;
  }
}
.page-security .main-header {
  height: 100vh;
  min-height: 560px;
  background: url('/images/homepage/security/security-header.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
  text-align: center;
}
.page-security .main-header .title {
  margin-bottom: 37px;
  font-size: 56px;
  line-height: 100%;
}
@media screen and (max-width: 736px) {
  .page-security .main-header .title {
    margin-top: 30px;
    font-size: 42px;
  }
}
.page-security .main-header .subtitle {
  font-size: 20px;
  color: #fff;
  font-weight: normal;
  line-height: 28px;
  max-width: 390px;
  font-weight: 400;
}
.page-security .main-header .banners {
  padding: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.page-security .main-header .banners .title {
  color: #999;
  font-size: 12px;
}
.page-security .main-header .banners .banner {
  background-color: #858585;
}
.page-security .section {
  display: flex;
  padding: 55px 10px 53px;
  align-items: center;
  flex-direction: column;
}
.page-security .section.gray {
  padding-top: 41px;
  background-color: #f5f5f5;
}
.page-security .section.intro {
  padding-top: 62px;
  padding-bottom: 60px;
}
.page-security .section.intro .text {
  color: #383838;
  font-size: 28px;
  line-height: 36px;
}
.page-security .section.form-section .content {
  justify-content: center;
}
.page-security .section .content {
  max-width: 620px;
  margin-bottom: 31px;
}
.page-security .section .content:last-of-type {
  margin-bottom: 0;
}
.page-security .section .title {
  font-size: 24px;
  color: #373737;
  font-weight: bold;
  line-height: 32px;
  margin-bottom: 36px;
}
.page-security .section .subtitle {
  margin-bottom: 8px;
  font-weight: 600;
}
.page-security .section .subtitle.new {
  margin-bottom: 42px;
}
.page-security .section .subtitle.new:before {
  font-size: 12px;
  line-height: 16px;
  content: 'New';
  display: inline-block;
  margin-right: 9px;
  padding: 2px 7px 0;
  border-radius: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
  background-color: #e0e0e0;
  color: #777;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}
.page-security .section .subtitle,
.page-security .section .text,
.page-security .section .features,
.page-security .section .item-title {
  font-size: 20px;
  color: #373737;
  font-weight: normal;
  line-height: 28px;
}
.page-security .section .text {
  margin-bottom: 5px;
}
.page-security .section .text + .features {
  padding-top: 10px;
}
.page-security .section a {
  color: #373737;
  position: relative;
}
.page-security .section a:after {
  content: '';
  border-bottom: 1px solid #373737;
  bottom: 0;
  left: 0;
  opacity: 0.25;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
.page-security .section a:hover:after {
  opacity: 0;
}
.page-security .section .features {
  margin: 0;
  padding-bottom: 0;
  padding-left: 22px;
}
.page-security .section .features .item {
  margin-bottom: 15px;
  position: relative;
}
.page-security .section .features .item:before {
  content: '•';
  position: absolute;
  top: -1px;
  left: -21px;
  font-weight: 600;
}
.page-security .section .features .item .item-title {
  margin-bottom: 15px;
  font-weight: 600;
}
.page-security .section .fake-link {
  font-weight: 300;
}
.page-security .form-container {
  width: 315px;
}
#legal-doc {
  counter-reset: section;
}
#legal-doc .redirect-to-app {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  right: 0;
  margin: 16px 30px;
}
#legal-doc .redirect-to-app a {
  font-size: 14px;
  color: #ffffff;
  -webkit-text-decoration: none solid #ffffff;
          text-decoration: none solid #ffffff;
}
#legal-doc .redirect-to-app img {
  margin-right: 7px;
}
#legal-doc .header {
  margin-bottom: 148px;
  padding: 74px 0 72px;
  background: #006cff;
}
#legal-doc .header .logo {
  width: 64px;
  height: 64px;
  margin-bottom: 48px;
  background-size: 64px;
  transition: opacity 0.2s ease-out;
}
#legal-doc .header .logo:hover {
  opacity: 0.8;
}
#legal-doc .header .effective-date {
  font-size: 18px;
  color: #fff;
  font-weight: normal;
  line-height: 24px;
  margin-bottom: 36px;
}
#legal-doc .header .prior-version {
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
  color: #fff;
  transform: translateY(-40px);
}
#legal-doc .header .prior-version a {
  color: #fff;
  position: relative;
}
#legal-doc .header .prior-version a:after {
  content: '';
  border-bottom: 1px solid #fff;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  transition: opacity 0.1s ease-out;
  width: 100%;
}
#legal-doc .header .prior-version a:hover:after {
  opacity: 0;
}
#legal-doc .header .title {
  color: #fff;
  font-size: 60px;
  letter-spacing: 0.01em;
}
#legal-doc .content {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 1020px) {
  #legal-doc .content {
    max-width: none;
    padding-right: 20px;
    padding-left: 20px;
  }
}
#legal-doc .section {
  margin-bottom: 59px;
}
#legal-doc .section.with-table {
  overflow: auto;
}
#legal-doc .section:last-of-type {
  margin-bottom: 150px;
}
#legal-doc .section h2 {
  margin-bottom: 29px;
  color: #006cff;
  font-size: 31px;
  font-weight: bold;
  counter-reset: subsection;
  counter-increment: section;
}
#legal-doc .section h2:before {
  content: counter(section) '.';
  margin-right: 15px;
}
#legal-doc .section h3 {
  display: inline-block;
  font-weight: 600;
}
#legal-doc .section h3,
#legal-doc .section p {
  color: #1e1e1e;
  font-size: 18px;
  line-height: 30px;
}
#legal-doc .section p {
  margin-bottom: 30px;
}
#legal-doc .section a {
  color: #006cff;
}
#legal-doc .section ul,
#legal-doc .section ol {
  margin: 0;
  line-height: 30px;
}
#legal-doc .section ul li,
#legal-doc .section ol li {
  color: #5e5e5e;
  list-style: inherit;
}
#legal-doc .section ul li:before,
#legal-doc .section ol li:before {
  flex-grow: 0;
  flex-shrink: 0;
}
#legal-doc .section ul strong,
#legal-doc .section ol strong {
  color: #1e1e1e;
}
#legal-doc .section ul strong,
#legal-doc .section ol strong,
#legal-doc .section ul strong a,
#legal-doc .section ol strong a {
  font-weight: 600;
}
#legal-doc .section ul {
  padding-left: 52px;
  list-style-type: disc;
}
#legal-doc .section ul li {
  margin-bottom: 30px;
  padding-left: 20px;
}
#legal-doc .section > ol {
  list-style-type: none;
  counter-reset: subsection;
}
#legal-doc .section > ol > li {
  margin-bottom: 30px;
  counter-increment: subsection;
}
#legal-doc .section > ol > li:before {
  content: counter(section) '.' counter(subsection) '.';
  width: 35px;
}
#legal-doc .section > ol > li article p {
  color: #5e5e5e;
  font-weight: 400;
}
#legal-doc .section > ol > li article p:first-of-type {
  display: inline;
}
#legal-doc .section > ol > li article p:nth-of-type(2) {
  margin-top: 30px;
}
#legal-doc .section > ol > li article > ol {
  margin-bottom: 30px;
  counter-reset: point;
}
#legal-doc .section > ol > li article > ol > li {
  counter-increment: point;
}
#legal-doc .section > ol > li article > ol > li:before {
  content: counter(point, lower-alpha) ')';
  margin-right: 25px;
}
#legal-doc .section > ol > li article p:last-child,
#legal-doc .section > ol > li article ol:last-child {
  margin-bottom: 0;
}
#legal-doc .section ol {
  padding-left: 36px;
}
#legal-doc .section ol li {
  display: flex;
}
#legal-doc .section ol li:before {
  margin-right: 10px;
  clear: both;
  color: #1e1e1e;
}
#legal-doc .section ol.simple {
  padding-left: 36px;
  counter-reset: item;
}
#legal-doc .section ol.simple li {
  margin-bottom: 0;
  counter-increment: item;
}
#legal-doc .section ol.simple li:before {
  content: counter(item) '.';
  width: 11px;
  margin-right: 25px;
}
#legal-doc .section table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  text-align: left;
}
#legal-doc .section table th,
#legal-doc .section table td {
  padding: 5px 10px;
}
#legal-doc .section table th.center,
#legal-doc .section table td.center {
  text-align: center;
}
#legal-doc .section table .tbody-title th {
  padding: 30px 10px 5px 0;
  font-size: 22px;
  font-weight: 600;
  text-align: left;
}
#legal-doc .section table thead th {
  background-color: #f0f0f0;
}
#legal-doc .section table tbody tr:nth-child(even) {
  background-color: #f8f8f8;
}
#legal-doc .section:not(:first-of-type) > p {
  padding-left: 36px;
}