@import url("https://html-assets-prod.guideflow.com/e3b20889c1e1e586463dec6ce35ae3c3f74f4d95");
@import url("https://html-assets-prod.guideflow.com/de48a66fac430174634c9028513b78ed7b6626e2");
@import url("https://html-assets-prod.guideflow.com/3c5d2fd6ffbbf64a35990eb7de74f8ca6c521aa7");
@import url("https://html-assets-prod.guideflow.com/8ee65fb963a7f24a34d3a89aad056ba379534ddd");
@import url("https://html-assets-prod.guideflow.com/427ba326cddab0d0c6f5ae4b838de5148abda8f0");

.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

/* Input container */
.ory_elements__grid__roeg5j0.ory_elements__grid_gap_4__roeg5j3 {
  padding: 0.25rem 0;
}

/* Override Input styles */
.ory_elements__input_field__1tgfa2l1 {
  border-color: var(--grey-400);
  border-radius: 0.5rem;

  &:not(:focus):not(:placeholder-shown):valid {
    border-color: var(--grey-400);
  }
}

/* Overrides checkbox styles */
.ory_elements__checkbox__15kln121 {
  border: 1px solid var(--grey-400);

  &:checked {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
  }
}

label {
  color: var(--grey-700);

  /* Hide label asterisk */
  .ory_elements__input_field__1tgfa2l0 {
    display: none;
  }
}

/* Link style */
.ory_elements__button_link__w27ftz0 {
  font-weight: 600;
}

.terms-container,
.terms-container-margin-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;

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

  .divider {
    color: var(--grey-400);
    width: fit-content;
    margin: 0;
  }
}

.terms-container {
  margin-top: 3rem;
}

.terms-container-margin-bottom {
  margin-bottom: 2rem;
}

/* signup presentation - right side */
.auth-presentation {
  padding: 4rem;
  background-color: var(--grey-200);
  width: 55%;
  /* height: 90vh; */
  overflow: hidden;
  /* dot grid background */
  background-image: radial-gradient(rgba(71, 84, 103, 0.08) 10%, transparent 0);
  background-position: 0 0, 27px 16px;
  background-size: 1.5rem 1.5rem;

  @media (max-width: 1290px) {
    display: none;
  }
}

.presentation {
  font-weight: 500;
  font-size: 1.63rem;
  line-height: 2.13rem;
  margin-bottom: 2rem;
}

.presentation-quote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.quote-attribution {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar-container {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--purple-100);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.quote-author {
  color: var(--grey-900);
  font-weight: 600;
  margin-bottom: 0.38rem;
}

.quote-author-status {
  color: var(--grey-600);
  font-style: 0.88rem;
}

.text-gradient {
  background: rgb(171, 0, 245);
  background: linear-gradient(
    90deg,
    rgba(171, 0, 245, 1) 0%,
    rgba(242, 1, 151, 1) 63%,
    rgba(239, 3, 26, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  font-size: 1.13rem;
  font-weight: 600;
  letter-spacing: 0.18rem;
}

.auth-image-container {
  border: 6px solid var(--grey-900);
  border-radius: 0.75rem;
  overflow: hidden;
  position: absolute;
  width: 80vw;
  height: 80vh;
  left: 0;
  top: 8rem;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
  }
}

/* dot grid background */
.grid-background {
  background-image: radial-gradient(rgba(71, 84, 103, 0.08) 10%, transparent 0);
  background-position: 0 0, 27px 16px;
  background-size: 1.5rem 1.5rem;
}

.grid-background-container {
  position: absolute;
  z-index: -10;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40rem;
  width: 40rem;
  border-radius: 50%;
}