.heading {
  font-weight: 300;
  width: 100%;
  text-align: center;
  padding-block-end: 10px;
}
@media (min-width: 940px) {
  .heading {
    max-width: 910px;
  }
}

.heading--noPadding-bottom {
  padding-block-end: 0;
}

.heading--blog {
  font-size: 36px;
  line-height: 42px;
  color: #808080;
}

.heading--left {
  text-align: left;
}

.heading--mobile {
  text-align: center;
}
@media (min-width: 568px) {
  .heading--mobile {
    text-align: left;
  }
}

.heading--promo {
  font-weight: 700;
  position: relative;
}
@media (min-width: 940px) {
  .heading--promo {
    align-self: center;
  }
}

@media (min-width: 940px) {
  .heading--promoLeft {
    text-align: left;
  }
}

.heading--right {
  position: relative;
  color: transparent;
  padding-inline-end: 5px;
}

.heading--right::before {
  position: absolute;
  content: "Multi";
  color: #ffffff;
}

.heading--grid {
  width: 100%;
  margin-block-start: 14px;
}

.heading--form {
  text-align: center;
}
@media (min-width: 568px) {
  .heading--form {
    padding-block-start: 18px;
  }
}
@media (min-width: 940px) {
  .heading--form {
    text-align: left;
  }
}

@media (min-width: 940px) {
  .heading--formDemo {
    text-align: center;
  }
}

.heading--faq {
  color: #1F62CC;
  cursor: pointer;
  text-indent: -35px;
  padding-inline-start: 20px;
}

.heading--h1 {
  font-size: 36px;
  line-height: 42px;
}
@media (min-width: 568px) {
  .heading--h1 {
    font-size: 40px;
    line-height: 48px;
  }
}
@media (min-width: 940px) {
  .heading--h1 {
    font-size: 44px;
    line-height: 52px;
  }
}

.heading--h2 {
  font-size: 36px;
  line-height: 42px;
  padding-block-end: 20px;
}
@media (min-width: 568px) {
  .heading--h2 {
    font-size: 40px;
    line-height: 48px;
  }
}
@media (min-width: 940px) {
  .heading--h2 {
    font-size: 44px;
    line-height: 52px;
  }
}

.heading--h3 {
  font-size: 30px;
  line-height: 36px;
}
@media (min-width: 568px) {
  .heading--h3 {
    font-size: 32px;
    line-height: 38px;
  }
}
@media (min-width: 940px) {
  .heading--h3 {
    font-size: 36px;
    line-height: 42px;
  }
}

.heading--h3-pss {
  color: #2E75E6;
  padding-block-start: 19px;
  font-size: 36px;
  line-height: 42px;
}
@media (min-width: 568px) {
  .heading--h3-pss {
    color: #2E75E6;
    padding-block-start: 19px;
    font-size: 36px;
    line-height: 42px;
  }
}
@media (min-width: 940px) {
  .heading--h3-pss {
    color: #2E75E6;
    padding-block-start: 19px;
    font-size: 36px;
    line-height: 42px;
  }
}

.heading--h4 {
  font-size: 24px;
  line-height: 30px;
}
@media (min-width: 568px) {
  .heading--h4 {
    font-size: 26px;
    line-height: 32px;
  }
}
@media (min-width: 940px) {
  .heading--h4 {
    font-size: 28px;
    line-height: 34px;
  }
}

.heading--h5 {
  font-size: 18px;
  line-height: 22px;
}
@media (min-width: 568px) {
  .heading--h5 {
    font-size: 20px;
    line-height: 24px;
  }
}
@media (min-width: 940px) {
  .heading--h5 {
    font-size: 22px;
    line-height: 26px;
  }
}

.heading--h6 {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
@media (min-width: 568px) {
  .heading--h6 {
    font-size: 15px;
    line-height: 20px;
  }
}
@media (min-width: 940px) {
  .heading--h6 {
    font-size: 17px;
    line-height: 22px;
  }
}

.heading--h6-blog {
  color: #808080;
  font-weight: 400;
  text-transform: none;
}

.heading--userGuide {
  text-align: left;
}

.heading--link {
  text-decoration: none;
  color: inherit;
}

.heading--center {
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block-start: 0;
  margin-block-end: 0;
}

.heading--code {
  font-size: 24px;
  line-height: 30px;
  padding-block-start: 10px;
  padding-block-end: 10px;
}

.heading--logo {
  padding-block-end: 0;
  color: #808080;
  text-decoration: none;
  margin-inline-end: auto;
  width: auto;
}

.heading--powerup {
  padding-inline-start: 20px;
  padding-inline-end: 20px;
  margin-block-start: 10px;
}
@media (min-width: 568px) {
  .heading--powerup {
    margin-block-start: 20px;
  }
}
@media (min-width: 940px) {
  .heading--powerup {
    padding-inline-start: 30px;
  }
}

.heading--price {
  padding-block-start: 25px;
  padding-block-end: 20px;
}

.heading--instruction {
  color: #333333;
  font-weight: bold;
  padding-block-end: 20px;
}

.heading--weight-400 {
  font-weight: 400;
}

.heading--signup {
  padding-block-end: 10px;
}
@media (min-width: 720px) {
  .heading--signup {
    padding-block-end: 15px;
  }
}
@media (min-width: 940px) {
  .heading--signup {
    padding-block-end: 10px;
  }
}

.heading--dark {
  color: #333333;
}

.heading--back {
  position: relative;
  padding-inline-start: 40px;
}

.heading__back {
  position: absolute;
  left: 0;
  top: 15px;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.text {
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  overflow: hidden;
  font-family: inherit;
  width: 100%;
}
@media (min-width: 568px) {
  .text {
    font-size: 20px;
    line-height: 30px;
  }
}
@media (min-width: 940px) {
  .text {
    max-width: 910px;
    font-size: 22px;
    line-height: 30px;
  }
}

.text--left {
  text-align: left;
}

@media (min-width: 720px) {
  .text--left-marginLeft {
    margin-inline-start: 123px;
  }
}

.text--center-mobile {
  text-align: center;
}
@media (min-width: 568px) {
  .text--center-mobile {
    text-align: left;
  }
}

.text--grid {
  width: 100%;
}
@media (min-width: 940px) {
  .text--grid {
    max-width: 910px;
  }
}

.text--form {
  text-align: center;
  padding-block-start: 10px;
  padding-block-end: 20px;
}
@media (min-width: 940px) {
  .text--form {
    text-align: left;
    margin-block-end: 30px;
  }
}

.text--sm {
  font-size: 15px;
  line-height: 24px;
  padding-block-start: 5px;
  padding-block-end: 5px;
  text-align: left;
  font-family: inherit;
}
@media (min-width: 568px) {
  .text--sm {
    font-size: 15px;
    line-height: 24px;
    padding-block-start: 5px;
    padding-block-end: 5px;
    text-align: left;
  }
}
@media (min-width: 940px) {
  .text--sm {
    font-size: 17px;
    line-height: 26px;
    max-width: 910px;
  }
}
@media (min-width: 1140px) {
  .text--sm {
    font-size: 17px;
    line-height: 26px;
    max-width: 910px;
  }
}

.text--xs {
  font-size: 13px;
}
@media (min-width: 568px) {
  .text--xs {
    font-size: 13px;
  }
}
@media (min-width: 940px) {
  .text--xs {
    font-size: 15px;
  }
}
@media (min-width: 1140px) {
  .text--xs {
    font-size: 15px;
  }
}

.text--sm-center {
  text-align: center;
}
@media (min-width: 568px) {
  .text--sm-center {
    text-align: center;
  }
}

.text--upper {
  font-style: italic;
  color: #808080;
}

.text--error {
  color: #ff6666;
}

.text--paddingBlockEnd {
  padding-block-end: 10px;
}
@media (min-width: 568px) {
  .text--paddingBlockEnd {
    padding-block-end: 15px;
  }
}
@media (min-width: 940px) {
  .text--paddingBlockEnd {
    padding-block-end: 15px;
  }
}

.text--paddingBlockEnd-big {
  padding-block-end: 20px;
}
@media (min-width: 568px) {
  .text--paddingBlockEnd-big {
    padding-block-end: 25px;
  }
}
@media (min-width: 940px) {
  .text--paddingBlockEnd-big {
    padding-block-end: 25px;
  }
}

.text--narrow {
  max-width: 290px;
}
@media (min-width: 940px) {
  .text--narrow {
    max-width: 290px;
  }
}

.text--regular {
  font-weight: 400;
}

.text--bold {
  font-weight: bold;
}

.text--overflow-x {
  display: flex;
  overflow-x: auto;
}

.text--code {
  background-color: #eeeeee;
  color: #333333;
  padding: 10px 60px 10px 20px;
  border-radius: 3px;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-size: 13px;
  overflow-x: auto;
  margin-block-end: 10px;
  position: relative;
}
@media (min-width: 568px) {
  .text--code {
    font-size: 13px;
  }
}
@media (min-width: 940px) {
  .text--code {
    font-size: 15px;
  }
}
@media (min-width: 1140px) {
  .text--code {
    font-size: 15px;
  }
}

.text--inline-code {
  font-family: Consolas, Menlo, Monaco, monospace;
  color: #333333;
  font-size: 15px;
}
@media (min-width: 568px) {
  .text--inline-code {
    font-size: 13px;
  }
}
@media (min-width: 940px) {
  .text--inline-code {
    font-size: 15px;
  }
}
@media (min-width: 1140px) {
  .text--inline-code {
    font-size: 15px;
  }
}

.text--attach {
  margin: 5px auto;
}
@media (min-width: 568px) {
  .text--attach {
    font-size: 18px;
    margin-block-start: 3px;
  }
}
@media (min-width: 940px) {
  .text--attach {
    font-size: 18px;
    margin-block-start: 3px;
  }
}

.text--fileName {
  position: absolute;
  font-size: 15px;
  top: 40px;
  width: 258px;
}
@media (min-width: 568px) {
  .text--fileName {
    width: 248px;
    top: 0;
    left: 265px;
  }
}
@media (min-width: 720px) {
  .text--fileName {
    width: 258px;
  }
}
@media (min-width: 940px) {
  .text--fileName {
    width: 460px;
  }
}
@media (min-width: 1140px) {
  .text--fileName {
    width: 660px;
  }
}

.text--center {
  text-align: center;
}

.text--resources {
  width: 135px;
}
@media (min-width: 568px) {
  .text--resources {
    width: 320px;
    text-align: left;
  }
}
@media (min-width: 940px) {
  .text--resources {
    width: 350px;
  }
}

.text--indexDrop {
  color: #1F62CC;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block-end: 10px;
}
@media (min-width: 1140px) {
  .text--indexDrop {
    padding-block-end: 0px;
  }
}

.text--enabled {
  padding-inline-start: 20px;
}

.text--grey {
  color: #808080;
}

.text--white {
  color: #ffffff;
}

.text--blue {
  color: #1F62CC;
}

@media (min-width: 940px) {
  .text--promo {
    text-align: left;
  }
}

.text--image-before {
  position: relative;
  padding-inline-start: 30px;
  width: auto;
}

.text--nopadding {
  padding: 0;
}
@media (min-width: 568px) {
  .text--nopadding {
    padding: 0;
  }
}
@media (min-width: 940px) {
  .text--nopadding {
    padding: 0;
  }
}

.text--paddingBlockStart {
  padding-block-start: 15px;
}
@media (min-width: 568px) {
  .text--paddingBlockStart {
    padding-block-start: 15px;
  }
}
@media (min-width: 940px) {
  .text--paddingBlockStart {
    padding-block-start: 15px;
  }
}

.text--marginBlockStart-auto {
  margin-block-start: auto;
}
@media (min-width: 568px) {
  .text--marginBlockStart-auto {
    margin-block-start: auto;
  }
}
@media (min-width: 940px) {
  .text--marginBlockStart-auto {
    margin-block-start: auto;
  }
}

.text__copy {
  display: inline-block;
  margin-inline-start: 10px;
  color: #1F62CC;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  border: 1px solid #1F62CC;
  border-radius: 4px;
  cursor: pointer;
}

.text__copy--position {
  position: absolute;
  top: 6px;
  right: 5px;
}

.text__copy:hover,
.text__copy:focus,
.text__copy:active {
  color: #2E75E6;
  border: 1px solid #2E75E6;
}

.text.certificate-content {
  max-height: 170px;
  transition-property: all;
  transition-duration: 0.5s;
}

.text.certificate-content--visible {
  max-height: none;
}

.text__plus {
  position: absolute;
  left: 0;
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url("../img/icon-plus.svg");
  background-position: center;
  background-repeat: no-repeat;
}

.text__plus--trash {
  background-image: url("../img/icon-container.svg");
}

.button {
  min-width: 120px;
  min-height: 40px;
  height: fit-content;
  margin-inline-start: auto;
  margin-inline-end: auto;
  color: #1F62CC;
  font-size: 18px;
  line-height: 36px;
  font-weight: 400;
  text-decoration: none;
  border: 2px solid #1F62CC;
  border-radius: 5px;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
  background-color: #ffffff;
  display: inline-block;
  margin-block-start: 9px;
  margin-block-end: 18px;
  cursor: pointer;
  text-align: center;
  appearance: none;
}
.button:hover, .button:focus, .button:active {
  border-color: #2E75E6;
  color: #2E75E6;
}
@media (min-width: 568px) {
  .button {
    margin-inline-start: 10px;
    margin-inline-end: 10px;
  }
}

.button:disabled {
  cursor: none;
  background-color: #D3D7E0;
  border-color: #b2b2b2;
  color: #b2b2b2;
}

.button:disabled:hover,
.button:disabled:focus {
  cursor: auto;
  background-color: #D3D7E0;
  color: #b2b2b2;
}

.button--darkBorder {
  background-color: transparent;
  border-color: #1F62CC;
}
.button--darkBorder:hover, .button--darkBorder:focus, .button--darkBorder:active {
  border-color: #2E75E6;
  color: #2E75E6;
}

.button--dark {
  border-color: #1F62CC;
  background-color: #1F62CC;
  color: #ffffff;
}
.button--dark:hover, .button--dark:focus, .button--dark:active {
  background-color: #2E75E6;
  color: #ffffff;
}

.button--big {
  font-size: 20px;
  line-height: 46px;
  height: 50px;
  padding-inline-start: 30px;
  padding-inline-end: 30px;
}
@media (min-width: 940px) {
  .button--big {
    font-size: 22px;
  }
}

@media (min-width: 568px) {
  .button__promo--left {
    margin-inline-end: 18px;
  }
}
@media (min-width: 940px) {
  .button__promo--left {
    margin-inline-start: 0;
  }
}

.button__promo--right {
  background: none;
  color: #ffffff;
}
.button__promo--right:hover, .button__promo--right:focus, .button__promo--right:active {
  background-color: #2E75E6;
  color: #ffffff;
  border: 2px solid #ffffff;
}
@media (min-width: 568px) {
  .button__promo--right {
    margin-inline-start: 18px;
  }
}

.button--letsTalk {
  margin-inline-start: calc(50% - 62px);
  margin-block-start: 20px;
  margin-block-end: 20px;
}
@media (min-width: 720px) {
  .button--letsTalk {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
}

@media (min-width: 568px) {
  .button--getStarted {
    display: inline-block;
    margin-inline-start: calc(50% - 75px);
  }
}
@media (min-width: 1140px) {
  .button--getStarted {
    margin-inline-start: calc(50% - 85px);
  }
}

.button--store {
  min-width: 140px;
  margin-block-start: 0;
  margin-block-end: 10px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #1F62CC;
  border-color: #1F62CC;
  background-color: transparent;
}

.button--store-google {
  background-image: url("../img/btn-android.svg");
  margin-inline-start: 0;
  font-size: 0;
}
@media (min-width: 568px) {
  .button--store-google {
    margin-inline-start: 0;
  }
}

.button--store-ios {
  background-image: url("../img/btn-ios.svg");
  margin-inline-end: 0;
  font-size: 0;
}

.button--store-amazon {
  font-size: 0;
}

@media (min-width: 720px) {
  .button--store-amazon,
  .button--store-service {
    margin-block-start: 0;
  }
}

.button--action {
  background-color: #ffcc00;
  border-color: #ffcc00;
  color: #665533;
}
.button--action:hover, .button--action:focus, .button--action:active {
  background-color: #ffdd44;
  border-color: #ffdd44;
  color: #665533;
}

.button--actionOrange {
  background-color: #ff9933;
  border-color: #ff9933;
  color: #ffffff;
}
.button--actionOrange:hover, .button--actionOrange:focus, .button--actionOrange:active {
  background-color: #ffaa44;
  border-color: #ffaa44;
  color: #ffffff;
}

.button--action-dark {
  background-color: #1F62CC;
  border-color: #1F62CC;
  color: #ffffff;
}
.button--action-dark:hover, .button--action-dark:focus, .button--action-dark:active {
  background-color: #2E75E6;
  border-color: #2E75E6;
  color: #ffffff;
}

.button--actionMainNav {
  margin: 0;
  min-width: 0;
}
@media (min-width: 568px) {
  .button--actionMainNav {
    margin: 0;
  }
}

.button--mainNav {
  margin: 0;
  padding: 0 15px;
  min-width: auto;
}
@media (min-width: 720px) {
  .button--mainNav {
    margin: 0;
  }
}
@media (min-width: 940px) {
  .button--mainNav {
    margin: 0;
    font-size: 17px;
  }
}

.button--mainNav-login {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
  margin-inline-start: 0;
  margin-inline-end: 20px;
}
@media (min-width: 720px) {
  .button--mainNav-login {
    margin-inline-start: 0;
    margin-inline-end: 20px;
  }
}
@media (min-width: 940px) {
  .button--mainNav-login {
    margin-inline-end: 5px;
    border-color: transparent;
    color: #1F62CC;
  }
}

.button--mainNav-login:hover,
.button--mainNav-login:focus,
.button--mainNav-login:active {
  color: #bbddff;
  border-color: #bbddff;
}
@media (min-width: 940px) {
  .button--mainNav-login:hover,
  .button--mainNav-login:focus,
  .button--mainNav-login:active {
    color: #2E75E6;
    border-color: transparent;
  }
}

.button--blog {
  min-width: 80px;
  margin: 0;
  border-color: #1F62CC;
  position: relative;
}

.button--blog-prev {
  padding-inline-start: 30px;
  padding-inline-end: 10px;
}
@media (min-width: 1140px) {
  .button--blog-prev {
    margin-inline-start: 100px;
  }
}

.button--blog-next {
  margin-inline-start: auto;
  padding-inline-start: 10px;
  padding-inline-end: 30px;
}
@media (min-width: 1140px) {
  .button--blog-next {
    margin-inline-end: 100px;
  }
}

.button--icon {
  position: relative;
  fill: #1F62CC;
}

.button--icon-prev {
  transform: rotate(90deg);
  left: 5px;
}

.button--icon-next {
  transform: rotate(270deg);
  right: 5px;
}

.button--blog:hover .button--icon,
.button--blog:focus .button--icon,
.button--blog:active .button--icon {
  fill: #2E75E6;
}

.button__quote {
  background-color: #eeeeee;
  border-color: #1F62CC;
  height: 40px;
  margin-block-end: 0;
  font-style: normal;
}

.button--left {
  margin-inline-start: 0;
}
@media (min-width: 568px) {
  .button--left {
    margin-inline-start: 0;
  }
}
@media (min-width: 720px) {
  .button--left {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
}

@media (min-width: 568px) {
  .button--right {
    margin-inline-end: 0;
  }
}
@media (min-width: 940px) {
  .button--right {
    margin-inline-end: 0;
  }
}

@media (min-width: 568px) {
  .button--leftCenter {
    margin-inline-start: auto;
  }
}

@media (min-width: 568px) {
  .button--rightCenter {
    margin-inline-end: auto;
  }
}

.button--center {
  margin-inline-start: auto;
  margin-inline-end: auto;
}
@media (min-width: 568px) {
  .button--center {
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

.button--actionDemo {
  padding-inline-start: 0;
  padding-inline-end: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}

.button--wide {
  width: 100%;
  margin: 0;
}
@media (min-width: 568px) {
  .button--wide {
    min-width: 250px;
    width: auto;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
}

.button--newProvider {
  width: 100%;
  margin-block-start: 10px;
  order: 2;
}
@media (min-width: 568px) {
  .button--newProvider {
    width: auto;
  }
}
@media (min-width: 720px) {
  .button--newProvider {
    order: 0;
    position: absolute;
    right: 0;
    top: -5px;
  }
}

.button--downloadCert {
  width: auto;
  margin-block-end: 10px;
  order: 2;
}
@media (min-width: 720px) {
  .button--downloadCert {
    order: 0;
    position: absolute;
    right: 30px;
    top: -5px;
    margin-block-start: 20px;
  }
}

.button--back {
  background-color: transparent;
  border: 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  position: absolute;
  text-align: left;
  margin: 0;
  width: 20px;
  height: 25px;
  font-size: 0;
  min-width: auto;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
}
@media (min-width: 568px) {
  .button--back {
    background-color: transparent;
    border: 0;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    position: relative;
    text-align: left;
    width: auto;
    height: auto;
    padding-inline-start: 25px;
    margin-block-end: 20px;
  }
}

@media (min-width: 568px) {
  .button--back::after {
    content: "";
    position: absolute;
    width: 546px;
    height: 1px;
    background-color: #D3D7E0;
    bottom: -10px;
    left: -10px;
  }
}
@media (min-width: 720px) {
  .button--back::after {
    width: 210px;
  }
}
@media (min-width: 940px) {
  .button--back::after {
    width: 290px;
  }
}
@media (min-width: 1140px) {
  .button--back::after {
    width: 300px;
  }
}

.button--back-sp {
  position: relative;
  font-size: 13px;
  line-height: 19px;
  width: 100%;
  padding-inline-start: 20px;
}
.button--back-sp:hover .button__back-arrow, .button--back-sp:focus .button__back-arrow, .button--back-sp:active .button__back-arrow {
  fill: #2E75E6;
}

@media (min-width: 568px) {
  .button--back-sp::after {
    height: 0;
  }
}

.button__back-arrow {
  transform: rotate(90deg);
  fill: #1F62CC;
  position: absolute;
  left: 0;
  top: 2px;
}
@media (min-width: 568px) {
  .button__back-arrow {
    top: 4px;
  }
}

.button--margin-top {
  margin-block-start: 10px;
}

.button--marginTop-big {
  margin-block-start: 20px;
}

.button--marginBottom-0 {
  margin-block-end: 0px;
}

.button--marginTop-0 {
  margin-block-start: 0px;
}

.button--marginLeft-0 {
  margin-inline-start: 0px;
}
@media (min-width: 568px) {
  .button--marginLeft-0 {
    margin-inline-start: 0px;
  }
}

.button--marginRight-0 {
  margin-inline-end: 0px;
}
@media (min-width: 568px) {
  .button--marginRight-0 {
    margin-inline-end: 0px;
  }
}

.button--marginTop-5 {
  margin-block-start: 5px;
}
@media (min-width: 568px) {
  .button--marginTop-5 {
    margin-block-start: 5px;
  }
}

.button--marginBottom-5 {
  margin-block-end: 5px;
}
@media (min-width: 568px) {
  .button--marginBottom-5 {
    margin-block-end: 5px;
  }
}

.button--margin-0 {
  margin: 0px;
}
@media (min-width: 568px) {
  .button--margin-0 {
    margin: 0px;
  }
}

.button--flex {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.button--timer:disabled .button__timer {
  display: inline-block;
}

.button__timer {
  display: none;
  position: relative;
  width: 28px;
  height: 28px;
  margin-top: 8px;
}

.button__timerAnimation {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  top: -5px;
  left: 0;
  border: 2px solid #1F62CC;
  border-radius: 50%;
  animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #1F62CC transparent transparent transparent;
}

.button__timer .button__timerAnimation:nth-child(1) {
  animation-delay: -0.45s;
}

@keyframes loader-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.passhub--external-link-svg {
  margin-block-end: -15px;
  margin-inline-start: -40px;
  stroke: #999;
}

.passhub--external-link:hover .passhub--external-link-svg {
  stroke: #0055cc;
}

.passhub--external-link {
  position: absolute;
  top: -5px;
  right: 0px;
}
@media (min-width: 940px) {
  .passhub--external-link {
    position: initial;
  }
}

.content--flex--passhub {
  flex-direction: column;
}
@media (min-width: 940px) {
  .content--flex--passhub {
    background-color: #ff6666;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: baseline;
    flex-direction: row;
  }
}

.list__row {
  background-color: #fff;
  margin-block-start: 4px;
  margin-block-end: 10px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  box-shadow: 0 0 2px 0 #cccccc;
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 20px;
}
@media (min-width: 940px) {
  .list__row {
    padding: 0;
    padding-block-end: 5px;
    display: flex;
    flex-direction: row;
    height: 60px;
    align-items: center;
  }
}

.list__head {
  width: 100%;
  display: none;
  font-size: 13px;
  color: #808080;
  justify-content: space-between;
}
@media (min-width: 940px) {
  .list__head {
    display: flex;
  }
}

.legend--users,
.legend--next {
  text-align: left;
  min-width: 120px;
}
@media (min-width: 940px) {
  .legend--users,
  .legend--next {
    text-align: right;
    padding-inline-start: 15px;
  }
}

.legend--domain {
  overflow-x: auto;
  position: relative;
}
@media (min-width: 940px) {
  .legend--domain {
    min-width: 400px;
    flex-grow: 2;
    padding-inline-start: 50px;
  }
}

@media (min-width: 940px) {
  .legend--status {
    min-width: 320px;
    text-align: right;
    padding-inline-end: 20px;
  }
}

@media (min-width: 940px) {
  .list--status {
    min-width: 250px;
    text-align: right;
    padding-inline-end: 20px;
  }
}

.list--content {
  width: 100%;
}

.list--domain--text {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}
@media (min-width: 940px) {
  .list--domain--text {
    font-size: 17px;
  }
}

.list--text {
  font-size: 17px;
  color: #333;
}

.legend__inline {
  font-size: 15px;
  color: #808080;
  display: inline;
}
@media (min-width: 940px) {
  .legend__inline {
    display: none;
  }
}

.prehead {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-block-start: 20px;
  margin-block-end: 15px;
}
@media (min-width: 940px) {
  .prehead {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.passhub--subhead--text {
  margin-block-start: 12px;
  text-align: center;
  font-size: 22px;
}
@media (min-width: 568px) {
  .passhub--subhead--text {
    margin-block-start: 20px;
    text-align: left;
  }
}

.passhub--head--text {
  text-align: center;
}
@media (min-width: 568px) {
  .passhub--head--text {
    text-align: left;
  }
}

.passhub--wrapper {
  width: 100%;
}

.passhub--heading {
  font-weight: 300;
  width: 100%;
  font-size: 24px;
  line-height: 30px;
  padding-block-start: 20px;
  padding-block-end: 10px;
}

.passhub--form__select {
  width: 250px;
  font-size: 15px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 10px 12px;
  margin-block-start: 5px;
  margin-block-end: 5px;
}

.passhub--form__button {
  width: 250px;
}

.passhub--form__button--extra {
  margin-block-start: 10px;
  margin-block-end: 10px;
}
@media (min-width: 568px) {
  .passhub--form__button--extra {
    margin-inline-end: 10px;
  }
}

.passhub--form__button--inline {
  width: 250px;
  margin-inline-start: 0px;
}
@media (min-width: 568px) {
  .passhub--form__button--inline {
    margin-inline-start: 0px;
  }
}
@media (min-width: 720px) {
  .passhub--form__button--inline {
    width: 150px;
    margin-inline-start: 10px;
  }
}

.passhub__panel {
  width: 100%;
  background-color: #ffffff;
  margin-block-start: 4px;
  margin-block-end: 4px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 24px;
  border: 1px solid #cccccc;
  box-shadow: 0 0 2px 0 #cccccc;
}

.passhub--panel__scroll {
  overflow-y: auto;
  min-height: 315px;
  height: calc(100vh - 300px);
}

.passhub__subpanel {
  padding: 20px;
  border-bottom: 1px solid #cccccc;
}

.passhub--form__wrap {
  width: 100%;
}

.passhub--form__wrap--inline {
  display: flex;
  flex-direction: column;
}
@media (min-width: 720px) {
  .passhub--form__wrap--inline {
    display: block;
  }
}

.passhub--form__label {
  width: 180px;
  display: inline-block;
  margin-block-start: 20px;
}

.passhub--form__label--inline {
  width: auto;
  margin-inline-end: 10px;
  display: block;
}
@media (min-width: 720px) {
  .passhub--form__label--inline {
    display: inline;
  }
}

.passhub--form__input {
  width: 250px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 10px 12px;
  margin-block-start: 5px;
  margin-block-end: 5px;
  font-size: 15px;
}

.passhub--form__input--error {
  border-color: #ff6666;
}

.passhub--form__text--error {
  color: #ff6666;
  font-size: 15px;
}
@media (min-width: 568px) {
  .passhub--form__text--error {
    display: inline-block;
    margin-inline-start: 190px;
  }
}
@media (min-width: 940px) {
  .passhub--form__text--error {
    margin-inline-start: 10px;
  }
}

.passhub--form__domain {
  text-align: right;
  padding-inline-end: 90px;
}

.passhub--form__domain--wrapper {
  position: relative;
  display: inline-block;
}

.passhub--form__domain--wrapper::after {
  position: absolute;
  content: " ";
  right: 10px;
  top: 13px;
  font-size: 15px;
}

.domain__mod__us::after {
  content: ".passhub.us";
}

.domain__mod__eu::after {
  content: ".passhub.eu";
}

.passhub--head__with-id {
  display: flex;
  flex-direction: column;
}
@media (min-width: 720px) {
  .passhub--head__with-id {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

.passhub--head__text-id {
  font-size: 15px;
  color: #808080;
  text-align: center;
}
@media (min-width: 568px) {
  .passhub--head__text-id {
    min-width: 320px;
    text-align: left;
  }
}
@media (min-width: 720px) {
  .passhub--head__text-id {
    text-align: right;
  }
}

.passhub--head__link {
  color: #0055cc;
  font: normal normal 300 30px/36px Roboto;
}
@media (min-width: 568px) {
  .passhub--head__link {
    font: normal normal 300 36px/42px Roboto;
  }
}

.passhub--legeng__text {
  color: #808080;
}

.passhub--link {
  color: #0055cc;
}

.passhub--link__centred {
  width: 100%;
  display: block;
  text-align: center;
}
@media (min-width: 568px) {
  .passhub--link__centred {
    display: inline;
    text-align: left;
  }
}

.passhub--text {
  margin-block-start: 5px;
  margin-block-end: 5px;
}

.passhub--text--refund {
  text-align: center;
}
@media (min-width: 568px) {
  .passhub--text--refund {
    text-align: left;
  }
}

.passhub--order-list {
  padding-inline-start: 25px;
  padding-block-end: 9px;
}

.passhub--order-list__item {
  text-align: left;
}

.login-grid__row {
  border-radius: 5px;
  padding: 5px 10px;
  margin: 10px auto;
  width: 300px;
}
@media (min-width: 720px) {
  .login-grid__row {
    margin: 10px 20px;
  }
}

.login-grid__row-logo {
  grid-area: logo;
  min-width: 120px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
@media (min-width: 720px) {
  .login-grid__row-logo {
    justify-content: unset;
    text-align: initial;
  }
}

.passhub--logo-img {
  width: 144px;
  height: 30px;
  fill: #05c;
  margin-block-end: 30px;
}
@media (min-width: 720px) {
  .passhub--logo-img {
    margin-block-end: 20px;
  }
}

.login-grid__row-qrcode {
  grid-area: qrcode;
  margin: 20px auto;
}

.login-grid__row-instruction {
  grid-area: instruction;
}

.passhub--login-grid {
  margin: 0px auto;
  max-width: 640px;
  width: 100%;
}
@media (min-width: 720px) {
  .passhub--login-grid {
    display: grid;
    grid-template-areas: "logo qrcode" "instruction qrcode";
    margin: 100px auto;
    width: 640px;
  }
}

.passhub--login__sub-text {
  width: 280px;
  height: 36px;
  text-align: left;
  font: normal normal 300 15px/18px Roboto;
  letter-spacing: 0px;
  color: #333333;
  opacity: 0.5;
  margin: 20px 0;
  padding-inline-start: 5px;
  position: relative;
}

.passhub--login__sub-text::before {
  content: "*";
  position: absolute;
  left: -5px;
}

.landingContent__icon--hardLogo {
  left: 10px;
}

.list {
  padding-inline-start: 20px;
  list-style: none;
}
@media (min-width: 720px) {
  .list {
    padding-inline-start: 30px;
  }
}

.list__item {
  margin-block-end: 10px;
  position: relative;
}
@media (min-width: 720px) {
  .list__item {
    margin-block-end: 20px;
  }
}
@media (min-width: 940px) {
  .list__item {
    margin-block-end: 30px;
  }
}

.list__item::before {
  position: absolute;
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10'><polyline points='1.5,5 8.5,5' fill='none' stroke='rgba(46, 117, 230, 0.3)' stroke-linecap='round' stroke-width='3'/></svg>");
  left: -20px;
  top: 0;
}

.list--text {
  font: normal normal 300 15px/24px Roboto;
}
@media (min-width: 720px) {
  .list--text {
    font: normal normal 300 17px/26px Roboto;
  }
}

.getstarted--wrapper {
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.passhub--h2 {
  margin-block-start: 30px;
  font: normal normal 300 24px/30px Roboto;
}
@media (min-width: 720px) {
  .passhub--h2 {
    margin-block-start: 20px;
    font: normal normal 300 26px/34px Roboto;
  }
}

.passhub--login-text {
  margin-block-end: 20px;
  font: normal normal 300 18px/26px Roboto;
}
@media (min-width: 720px) {
  .passhub--login-text {
    font: normal normal 300 22px/30px Roboto;
  }
}

.list--text {
  margin-block-end: 20px;
}

.list__item--text {
  margin-block-end: 10px !important;
}

#qrcode {
  margin: 25px auto;
}

.getstarted {
  max-width: 600px;
  counter-reset: stepCounter;
  padding-block-start: 20px;
  padding-block-end: 20px;
}
@media (min-width: 720px) {
  .getstarted {
    display: flex;
    flex-direction: column;
    padding-block-start: 60px;
    padding-block-end: 60px;
  }
}
@media (min-width: 940px) {
  .getstarted {
    max-width: 780px;
  }
}

.getstarted__list {
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.getstarted__item {
  padding-block-start: 100px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-end: 20px;
  counter-increment: item;
}

.getstarted__item::before {
  position: absolute;
  content: counters(item, ".");
  top: 0;
  left: calc(50% - 17px);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-image: linear-gradient(260deg, #38ba6a, #76c551);
  font-size: 18px;
  line-height: 35px;
  color: #fff;
  font-weight: 400;
  text-align: center;
}

.getstarted__item--first {
  background-image: url("../img/double-arrow-mobile.svg");
  background-position: 50% 34%;
  background-repeat: no-repeat;
}

.getstarted__item--first::before {
  top: 35px;
}

.getstarted__item--first::after {
  position: absolute;
  content: "";
  width: 175px;
  height: 50px;
  bottom: 34%;
  background-repeat: no-repeat;
  background-image: url("../img/double-brow-mobile.svg");
}

.getstarted__item--second {
  padding-block-start: 138px;
  background-image: url("../img/arrows-2-mobile.svg");
  background-position: 50% 20px;
  background-repeat: no-repeat;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.getstarted__item--second::before {
  top: 65px;
}

.getstarted__item--third {
  padding-block-start: 138px;
  background-image: url("../img/arrows-3-mobile.svg");
  background-position: 50% 20px;
  background-repeat: no-repeat;
}

.getstarted__item--third::before {
  top: 28px;
}

.getstarted__store {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  padding-block-start: 60px;
  padding-block-end: 100px;
}

.getstarted__device {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 175px;
  align-items: flex-start;
}

.popup--getstarted {
  position: absolute;
  margin-block-start: 550px;
  background-color: #fff;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}
@media (min-width: 568px) {
  .popup--getstarted {
    margin-block-start: 680px;
  }
}
@media (min-width: 720px) and (min-height: 600px) {
  .popup--getstarted {
    margin-block-start: 400px;
  }
}
@media (min-width: 720px) and (min-height: 1200px) {
  .popup--getstarted {
    margin-block-start: 250px;
  }
}
@media (min-width: 940px) and (max-height: 800px) {
  .popup--getstarted {
    margin-block-start: 550px;
  }
}
@media (min-width: 1140px) {
  .popup--getstarted {
    margin-block-start: 450px;
  }
}

.img--getstarted {
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block-start: 0;
  margin-block-end: 0;
}

.getstarted .text {
  font-size: 15px;
  text-align: center;
}

.goverlay {
  position: fixed;
  content: "";
  z-index: 1;
  background-color: rgba(0, 112, 255, 0.6);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button--store-apple {
  background-image: url(../img/btn-ios.svg);
}

.gpop {
  position: fixed;
  z-index: 10;
}

.gpop--getstarted {
  position: absolute;
  top: 50px;
  background-color: #fff;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

.gpop__close {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background-image: url("../img/icon-close.svg");
  top: -40px;
  right: 10px;
  pointer-events: none;
}

.gpop__wrapper {
  background: transparent;
  position: relative;
}
/* QR Code styles */
.qrcode {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.loginMain__code-qr {
  background-color: white;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
}

.qrtap {
  position: relative;
}

.qrcode--tap {
  position: relative;
}

.qrcode--tap::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.65);
  background-image: url("../img/qrcode_tap_hand.svg");
  animation-name: qrtapAnimation;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-duration: 2.5s;
  animation-direction: alternate;
  pointer-events: none;
}

@keyframes qrtapAnimation {
  0%, 55% {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
  }
  80%, 100% {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
  }
}