/* ----- SECTION SIGN IN ----- */
.section-sign-in .content-col {
  display: flex;
  flex: 0 0 56%;
  max-width: 56%;
}

.section-sign-in h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 3.3125rem;
}

.section-sign-in {
  padding-top: 0rem;
}

.section-sign-in .content-col .image-wrap {
  flex: 0 0 47.5%;
  max-width: 47.5%;
  position: relative;
}

.section-sign-in .content-col .image-wrap img {
  position: absolute;
  width: 24.125rem;
  height: 27.125rem;
  object-fit: contain;
  max-width: 200%;
  top: 0rem;
  left: -4.7rem;
}

.section-sign-in .flex {
  align-items: center;
}

.benefit {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.benefit .icon-circle {
  width: 2.8125rem;
  flex: 0 0 2.8125rem;
  height: 2.5625rem;
  margin-right: 0.9rem;
  margin-top: 0.6rem;
  background-repeat: no-repeat;
  background-position: -10px -385px;
  /* Fallback image */
  background-image: url("/img/css_sprites_sign_in@1x.png");
  /* WebP and PNG images for different resolutions */
  background-image: -webkit-image-set(url(/img/css_sprites_sign_in@1x.webp) 1x type("image/webp"),
      url(/img/css_sprites_sign_in@1.5x.webp) 1.5x type("image/webp"),
      url(/img/css_sprites_sign_in@2x.webp) 2x type("image/webp"),
      url(/img/css_sprites_sign_in@1x.png) 1x type("image/png"),
      url(/img/css_sprites_sign_in@1.5x.png) 1.5x type("image/png"),
      url(/img/css_sprites_sign_in@2x.png) 2x type("image/png"));
  background-image: image-set(url(/img/css_sprites_sign_in@1x.webp) 1x type("image/webp"),
      url(/img/css_sprites_sign_in@1.5x.webp) 1.5x type("image/webp"),
      url(/img/css_sprites_sign_in@2x.webp) 2x type("image/webp"),
      url(/img/css_sprites_sign_in@1x.png) 1x type("image/png"),
      url(/img/css_sprites_sign_in@1.5x.png) 1.5x type("image/png"),
      url(/img/css_sprites_sign_in@2x.png) 2x type("image/png"));
}

.benefit .icon {
  width: 2.3rem;
  height: 2.3rem;
  display: block;
  margin-left: 0.3rem;
  margin-top: 0.5rem;
  background-repeat: no-repeat;
  /* Fallback image */
  background-image: url("/img/css_sprites_sign_in@1x.png");
  /* WebP and PNG images for different resolutions */
  background-image: -webkit-image-set(url(/img/css_sprites_sign_in@1x.webp) 1x type("image/webp"),
      url(/img/css_sprites_sign_in@1.5x.webp) 1.5x type("image/webp"),
      url(/img/css_sprites_sign_in@2x.webp) 2x type("image/webp"),
      url(/img/css_sprites_sign_in@1x.png) 1x type("image/png"),
      url(/img/css_sprites_sign_in@1.5x.png) 1.5x type("image/png"),
      url(/img/css_sprites_sign_in@2x.png) 2x type("image/png"));
  background-image: image-set(url(/img/css_sprites_sign_in@1x.webp) 1x type("image/webp"),
      url(/img/css_sprites_sign_in@1.5x.webp) 1.5x type("image/webp"),
      url(/img/css_sprites_sign_in@2x.webp) 2x type("image/webp"),
      url(/img/css_sprites_sign_in@1x.png) 1x type("image/png"),
      url(/img/css_sprites_sign_in@1.5x.png) 1.5x type("image/png"),
      url(/img/css_sprites_sign_in@2x.png) 2x type("image/png"));
}

.benefit .icon-guarantee {
  background-position: -10px -229px;
}

.benefit .icon-handshake {
  background-position: -10px -281px;
}

.benefit .icon-secure-shield {
  background-position: -10px -333px;
}

.benefit .benefit-title {
  flex: 1;
}

.benefit p {
  font-size: 0.75rem;
  line-height: 1.125rem;
  max-width: 14.8rem;
  color: #0c0c0c;
}

.benefit h6 {
  font-size: 1rem;
  line-height: 1.5625rem;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}

.benefit h6 span {
  color: #5b61f3;
}

.section-sign-in .content-wrap {
  padding-top: 0.1rem;
}

/* ----- /SECTION SIGN IN ----- */
/*  */

/* ----- SECTION CUSTOM ----- */
.error-text {
  color: red;
}

.action {
  color: white !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  padding: 10px !important;
}

.hyperlink {
  color: blue;
  border-bottom: 1px solid blue;
}

.re-captcha {
  color: gray;
}

.error {
  border-radius: 5px;
  border: 2px solid var(--color-error) !important;
  padding-left: 3px;
}

input:focus-visible {
  outline: none;
}

.error-class {
  color: crimson;
}

.errors-class {
  border-top: 2px solid rgb(255, 0, 51);
}

.valid-class {
  border: 2px bolder greenyellow;
}

.button-vue {
  width: 100%;
}


.login-container {
  flex-wrap: nowrap;
}

/* ----- /SECTION CUSTOM ----- */
/*  */

/* ----- SECTION SIGN UP ----- */
.section-sign-up form .text-extra-small {
  font-weight: 400;
  color: #4d4d4d;
  font-size: 0.7rem;
  text-align: left;
  display: block;
  line-height: 1rem;
}

.section-sign-up form .text-extra-small a {
  color: #5b61f3;
}

.section-sign-up form .text-small {
  margin: 1.5rem 0;
}

.section-sign-up form .form-group {
  margin-bottom: 0.75rem;
}

.section-sign-up form .form-control {
  padding-left: 0.9rem;
}

.section-sign-up form .form-group .btn {
  margin-top: 1.4rem;
  margin-bottom: 0;
}

.section-sign-up form {
  padding-bottom: 3.3rem;
}

.section-sign-up .content-col .image-wrap img {
  position: static;
  width: 36rem;
  height: 19.75rem;
  margin-left: -7.3rem;
}

.section-sign-up .flex {
  align-items: flex-start;
}

.section-sign-up h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  /*max-width: 23rem;*/
  margin-bottom: 2rem;
}

.section-sign-up .flex .content-col {
  padding-left: 10.3%;
}

.section-sign-up .content-wrap {
  padding-top: 1rem;
}

.section-sign-up .benefit h6 {
  font-size: 1.25rem;
  line-height: 1.875rem;
  margin-bottom: 0.6rem;
}

.section-sign-up .benefit p {
  font-size: 0.9375rem;
  line-height: 1.4375rem;
  max-width: 17rem;
}

.section-sign-up .benefit .icon-circle {
  width: 3.75rem;
  flex: 0 0 3.75rem;
  height: 3.5rem;
  background-size: 80px;
  background-position: -12px -504px;
  margin-top: 0.9rem;
  margin-right: 1.4rem;
}

.section-sign-up .benefits {
  margin-left: -0.9rem;
}

.benefit .icon-confetti {
  background-position: -7px -338px;
  background-size: 47px;
}

.section-sign-up .benefit .icon {
  width: 3.2rem;
  height: 3.2rem;
  background-size: 61px;
  margin-top: 0.3rem;
}

.section-sign-up .benefit .icon-confetti {
  background-position: -5px -437px;
}

.section-sign-up .benefit {
  margin-bottom: 1.9rem;
}

.section-sign-up .benefit .icon-guarantee {
  background-size: 75px;
  background-position: -7px -278px;
}

.section-sign-up .benefit .icon-handshake {
  background-size: 75px;
  background-position: -7px -340px;
}

.section-sign-up .benefit .icon-secure-shield {
  background-size: 75px;
  background-position: -4px -406px;
}

.section-sign-up .content-col .image-wrap {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 6rem;
}

/* ----- /SECTION SIGN UP ----- */
/*  */
/* ----- MEDIA ----- */
@media (max-width: 1199px) {
  .section-sign-in .content-col .image-wrap img {
    width: 20.125rem;
    height: 23.125rem;
    left: -4rem;
  }

  /* ----- /SECTION SIGN IN ----- */
  /*  */
  /* ----- SECTION SIGN UP ----- */
  .section-sign-up .content-col .image-wrap img {
    width: 34rem;
    height: 17.75rem;
    margin-left: -4.5rem;
  }

  /* ----- /SECTION SIGN UP ----- */
  /*  */
}

@media (max-width: 1023px) {

  /* ----- SECTION SIGN IN ----- */
  .section-sign-in .content-col {
    flex: 0 0 45%;
    max-width: 45%;
  }

  .section-sign-in .form-col {
    flex: 0 0 55%;
    max-width: 55%;
  }

  .section-sign-in .flex {
    align-items: flex-start;
  }

  .section-sign-in .content-col .image-wrap {
    flex: 0 0 100%;
    max-width: 100%;
    order: 2;
    display: none;
  }

  .section-sign-in .content-wrap {
    order: 1;
    padding-top: 0rem;
  }

  .section-sign-in {
    padding-top: 0rem;
  }

  .section-sign-in h1 {
    font-size: 2.5rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
  }

  .benefits {
    padding-left: 1.3rem;
  }

  .benefit .icon-circle {
    width: 2.25rem;
    flex: 0 0 2.25rem;
    height: 1.875rem;
    margin-right: 0.7rem;
    background-size: 44px;
    background-position: -7px -275px;
  }

  .benefit h6 {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    margin-bottom: 0.4rem;
  }

  .benefit p {
    max-width: 12rem;
  }

  .benefit {
    margin-bottom: 1.5rem;
  }

  .section-sign-in .content-col .image-wrap img {
    position: static;
    width: 21.625rem;
    height: 24.375rem;
    margin-top: 0.6rem;
    margin-left: -2.1rem;
  }

  .benefit .icon {
    width: 34px;
    height: 34px;
    background-size: 44px;
    margin-left: 0.1rem;
    margin-top: 0.5rem;
  }

  .benefit .icon-confetti {
    background-position: -5px -315px;
    background-size: 44px
  }


  .benefit .icon-guarantee {
    background-position: -5px -164px;
  }

  .benefit .icon-handshake {
    background-position: -5px -201px;
  }

  .benefit .icon-secure-shield {
    background-position: -4px -239px;
  }

  /* ----- /SECTION SIGN IN ----- */
  /*  */
  /* ----- SECTION SIGN UP ----- */
  .section-sign-up .flex .content-col {
    padding-left: 1rem;
  }

  .section-sign-up .content-wrap {
    padding-top: 2.4rem;
  }

  .section-sign-up .benefit h6 {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    margin-bottom: 0.4rem;
  }

  .section-sign-up .benefit p {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }

  .section-sign-up h1 {
    margin-bottom: 4rem;
  }

  .section-sign-up .benefit .icon-circle {
    width: 2.25rem;
    flex: 0 0 2.25rem;
    height: 1.8125rem;
    margin-top: 0.6rem;
    background-size: 48px;
    background-position: -8px -302px;
    margin-right: 0.7rem;
  }

  .section-sign-up .benefits {
    margin-left: 0;
  }

  .section-sign-up .benefit .icon {
    background-size: 37px;
    width: 3.2rem;
    height: 2.5rem;
  }

  .section-sign-up .benefit .icon-confetti {
    background-position: -5px -266px;
  }

  .section-sign-up .benefit .icon-guarantee {
    background-position: -6px -172px;
    background-size: 46px;
  }

  .section-sign-up .benefit .icon-handshake {
    background-size: 46px;
    background-position: -7px -210px;
  }

  .section-sign-up .benefit {
    margin-bottom: 1.6rem;
  }

  .section-sign-up .benefit .icon-secure-shield {
    background-size: 46px;
    background-position: -4px -247px;
  }

  .section-sign-up form .form-group {
    margin-bottom: 0.78rem;
  }

  .section-sign-up form .text-extra-small {
    margin-top: 0.9rem;
  }

  .section-sign-up form .form-group .btn {
    margin-top: 0.8rem;
    margin-bottom: 0.1rem;
  }

  .section-sign-up form .bottom-text {
    text-align: center;
  }

  .section-sign-up form .bottom-text a {
    font-size: 0.9rem;
  }

  .section-sign-up form {
    padding-bottom: 2rem;
  }

  .section-sign-up form .form-control {
    font-size: .9rem;
    padding-left: 0.6rem;
    height: 3rem;
  }

  .section-sign-up .content-col .image-wrap {
    margin-top: 6.8rem;
  }

  .section-sign-up .content-col .image-wrap img {
    width: 21.8125rem;
    height: 12rem;
    margin: 0;
    margin-left: -1.1rem;
  }

  /* ----- /SECTION SIGN UP ----- */
  /*  */
  /*  */
}

@media((min-width: 768px) and (max-width: 1023px)) {

  .section-sign-in .content-col .image-wrap img {
    display: none;
  }
}

@media (max-width: 768px) {

  /* ----- SECTION SIGN IN ----- */
  .section-sign-in .content-col {
    flex: 0 0 100%;
    max-width: 100%;
    order: 2;
  }

  .section-sign-in .form-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .section-sign-in {
    padding-top: 0.3rem;
  }

  .section-sign-in .flex {
    margin: 0 -0.8rem;
  }



  .section-sign-in .content-col {
    text-align: center;
  }

  .section-sign-in h1 {
    font-size: 2rem;
    line-height: 2.75rem;
    margin-bottom: 2.5rem;
  }

  .benefit {
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.4rem;
  }

  .benefit .icon-circle {
    width: 3.625rem;
    height: 3.0625rem;
    margin-top: 0;
    flex: 0 0 3.625rem;
    margin-right: 0;
    margin-bottom: 0.5rem;
    background-size: 80px;
    background-position: -13px -504px;
  }

  .benefits {
    padding-left: 0;
  }

  .benefit .icon {
    width: 3rem;
    height: 3rem;
    background-size: 74px;
    margin-left: -0.1rem;
  }

  .benefit .icon-guarantee {
    background-position: -9px -275px;
  }

  .benefit h6 {
    font-size: 1rem;
    line-height: 1.5625rem;
  }

  .benefit p {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    max-width: 14rem;
    margin: 0 auto;
  }

  .section-sign-in .content-col .image-wrap {
    display: none;
  }

  .benefit:last-child {
    margin-bottom: 0;
  }

  .benefit .icon-handshake {
    background-position: -8px -338px;
  }

  .benefit .icon-secure-shield {
    background-position: -3px -400px;
  }

  /* ----- /SECTION SIGN IN ----- */
  /*  */
  /* ----- SECTION SIGN UP ----- */
  .section-sign-up .content-wrap {
    padding-top: 0.1rem;
  }

  .section-sign-up .flex .content-col {
    padding: 0 1.5rem;
  }

  .section-sign-up .benefit .icon-circle {
    margin: 0;
    width: 3.625rem;
    flex: 0 0 3.625rem;
    height: 2.9375rem;
    background-size: 75px;
    background-position: -12px -473px;
    margin-bottom: 0.2rem;
  }

  .section-sign-up h1 {
    margin-bottom: 2.5rem;
  }

  .section-sign-up .benefit .icon {
    background-size: 60px;
  }

  .section-sign-up .benefit .icon-confetti {
    background-position: -6px -432px;
  }

  .benefit .icon-confetti {
    background-position: -7px -338px;
  }

  .section-sign-up .benefit h6 {
    font-size: 1rem;
    line-height: 1.5625rem;
  }

  .section-sign-up .benefit p {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    max-width: 14.1rem;
  }

  .section-sign-up .benefit {
    margin-bottom: 2.7rem;
  }

  .section-sign-up .benefit .icon-guarantee {
    background-position: -9px -282px;
    background-size: 75px;
  }

  .section-sign-up .benefit .icon-handshake {
    background-position: -9px -345px;
    background-size: 75px;
  }

  .section-sign-up .benefit .icon-secure-shield {
    background-position: -4px -409px;
    background-size: 75px;
  }

  .section-sign-up .benefit:last-child {
    margin-bottom: 0;
  }

  /* ----- /SECTION SIGN UP ----- */
  /*  */
  /*  */

  .login-container {
    flex-wrap: wrap;
  }
}

/* ----- /MEDIA ----- */
/*  */