/* screen - log-in */

/* Responsive Adjustments */

.log-in {
  align-items: center;
  background-color: var(--white);
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100%;
  position: relative;
}

.log-in .section {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  min-width: 480px;
  position: relative;
}

@media (max-width: 1024px) {
  .log-in .section {
    min-width: auto;
  }
}

.log-in .container {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 0px 32px;
  position: relative;
  width: 100%;
}

@media (max-width: 1024px) {
  .log-in .container {
    padding: 0px 12px;
  }
}

.log-in .content-1 {
  align-items: flex-start;
  gap: 80px;
  /* max-width: 360px; */
}

@media (min-width: 768px) {
  .log-in .content-1 {
    max-width: 100%;
    padding: 0 40px;
  }
}

.log-in .logo {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: 156px;
}

.log-in .logo-wrap {
  height: 32px;
  position: relative;
  width: 156px;
}

.log-in .header {
  align-items: center;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  position: relative;
  width: 100%;
}

.log-in .text-and-supporting-text {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  position: relative;
  width: 100%;
}

.log-in .text-2 {
  align-self: stretch;
  color: var(--mirage);
  font-weight: 600;
  line-height: 44px;
  margin-top: -1.00px;
  position: relative;
}

.log-in button {
  width: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
}

/* .log-in button:hover {
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  transform: scale(1.01);
  transition: all 0.2s ease;
} */

.log-in .supporting-text {
  align-self: stretch;
  color: var(--scarpa-flow);
  font-weight: 400;
  line-height: 24px;
  position: relative;
}

.log-in .content-2 {
  align-items: center;
  align-self: stretch;
  border-radius: 12px;
  gap: 24px;
}

.log-in .form {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 5px;
  position: relative;
  width: 100%;
}

.log-in .input {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  position: relative;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--white);

}

.log-in .input-form {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  position: relative;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--iron);
}

.log-in .input-1 {
  align-self: stretch;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--iron);
  border-radius: 8px;
  box-shadow: 0px 1px 2px #0a0c120d;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  width: 100%;
}

.log-in .content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 8px;
  position: relative;
}

.log-in .text {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: var(--pale-sky);
  display: -webkit-box;
  flex: 1;
  font-weight: 400;
  line-height: 24px;
  margin-top: -1.00px;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
}

.log-in .row {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  padding: 10px;
}

.log-in .checkbox {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 8px;
  position: relative;
}

.log-in .input-2 {
  display: inline-flex;
  justify-content: center;
  padding: 2px 0px 0px;
}

.log-in .text-and-supporting-text-1 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

.log-in .text-3 {
  align-self: stretch;
  color: var(--outer-space);
  font-weight: 500;
  line-height: 20px;
  margin-top: -1.00px;
  position: relative;
}

.log-in .buttons-button {
  align-items: center;
  align-self: stretch;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  justify-content: center;
  position: relative;
}

.log-in .text-1 {
  color: var(--chambray);
  font-weight: 600;
  line-height: 20px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.log-in .actions {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  position: relative;
  width: 100%;
  padding: 10px
}

.log-in .buttons-button-1 {
  align-self: stretch;
  margin-left: -2.00px;
  margin-right: -2.00px;
  margin-top: -1.00px;
  width: 100%;
}

.log-in .social-button-sign-up {
  align-items: center;
  align-self: stretch;
  background-color: var(--chambray);
  border: 1px solid;
  color: var(--white);
  border-color: var(--iron);
  border-radius: 8px;
  box-shadow: 0px 1px 2px #0a0c120d, inset 0px -2px 0px #0a0c120d, inset 0px 0px 0px 1px #0a0c122e;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  justify-content: center;
  overflow: hidden;
  padding: 10px 16px;
  position: relative;
  width: 100%;
}

.log-in .social-button {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--iron);
  border-radius: 8px;
  box-shadow: 0px 1px 2px #0a0c120d, inset 0px -2px 0px #0a0c120d, inset 0px 0px 0px 1px #0a0c122e;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  justify-content: center;
  overflow: hidden;
  padding: 10px 16px;
  position: relative;
  width: 100%;
}

.log-in .social-button:hover {
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  transform: scale(1.01);
  transition: all 0.2s ease;
}

.log-in .social-button-sign-up:hover {
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  transform: scale(1.01);
  transition: all 0.2s ease;
}

.log-in .iconpos {
  height: 24px;
  position: relative;
  width: 24px;
}

.log-in .text-4 {
  color: var(--outer-space);
  font-weight: 600;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.log-in .text-sign {
  color: var(--white);
  font-weight: 600;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.log-in .row-1 {
  align-items: baseline;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.log-in .text-5 {
  color: var(--scarpa-flow);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.log-in .buttons-button-2 {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
}

.log-in .footer {
  align-items: flex-end;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  height: 96px;
  padding: 32px;
  position: relative;
  width: 100%;
}

@media (max-width: 1024px) {
  .log-in .footer {
    justify-content: center;
  }
}

.log-in .text-6 {
  color: var(--scarpa-flow);
  font-weight: 400;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.log-in .section-1 {
  align-self: stretch;
  flex: 1;
  flex-grow: 1;
  display: block;
  object-fit: cover;
  position: relative;

}

@media (max-width: 1024px) {
  .log-in .section-1 {
    display: none;
  }
}

/* @media (min-width: 768px) {
  .log-in .section-1 {
    display: none;
  }
} */

.log-in .buttons-button-3 {
  flex: 0 0 auto;
  position: relative;
}

.log-in .content-3 {
  display: flex;
  gap: 2rem;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 540px;
}

.log-in .input-3 {
  align-items: center;
  flex: 0 0 auto;
  position: relative;
}