/*
1 colore bottone
2 bordo/hover
3 testo
*/
/*
1 colore bottone
2 bordo/hover
3 testo
*/
.main:has(.loginContainer) {
  height: calc(100svh - 60px);
  padding-top: calc(80px + 1rem);
  gap: 0;
}

.main__content:has(.loginContainer) {
  display: flex;
  align-items: center;
  height: calc(100svh - 160px - 80px - 2rem);
}

.loginContainer {
  padding: 1.5rem 2rem;
  background-color: var(--bg-light);
  border-radius: 1rem;
  box-shadow: 0 0.1875rem 0.375rem 0 rgba(46, 38, 61, 0.18);
  width: 600px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .loginContainer {
    width: 500px;
  }
}
@media (max-width: 640px) {
  .loginContainer {
    width: 100%;
  }
}
@media (max-width: 425px) {
  .loginContainer {
    padding: 1rem 1.5rem;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }
}
.loginContainer__title {
  margin-bottom: 1rem;
}
.loginContainer__main form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.loginContainer__main form .field.field--checkbox {
  border: 0;
  width: fit-content;
  margin-left: auto;
  gap: 1rem;
}
.loginContainer__main form button {
  margin-top: 0.5rem;
  height: 52px;
  font-weight: 500;
  font-size: 16px;
}
.loginContainer__separator {
  display: flex;
  align-items: center;
  width: 100%;
  margin-block: 1rem;
  white-space: nowrap;
}
.loginContainer__separator::before, .loginContainer__separator::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--bg-dark);
}
.loginContainer__separator::before {
  margin-right: 1rem;
}
.loginContainer__separator::after {
  margin-left: 1rem;
}
.loginContainer__externals {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.btnLinkContainer {
  margin-top: 1.5rem;
}

.btnLink {
  height: 26px;
  display: flex;
  font-size: 15px;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}
@media (max-width: 640px) {
  .btnLink {
    font-size: 12px;
  }
}
@media (max-width: 425px) {
  .btnLink {
    height: unset;
    margin-block: 0.25rem;
    gap: 0;
    flex-direction: column;
  }
}
.btnLink a {
  color: var(--fg-dark);
  font-weight: 500;
}
.btnLink a:hover {
  color: var(--primary-dark);
}

.fieldInputs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}
@media (max-width: 375px) {
  .fieldInputs {
    gap: 2px;
  }
}
.fieldInputs span {
  display: flex;
  align-items: center;
  font-size: 22px;
}
.fieldInputs .field {
  width: fit-content;
}
@media (max-width: 640px) {
  .fieldInputs .field {
    width: 40px;
  }
}
.fieldInputs .field input {
  font-size: 18px;
  text-align: center;
}
@media (max-width: 375px) {
  .fieldInputs .field input {
    font-size: 15px;
  }
}

.socialLoginBtn {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--bg-dark);
  border-radius: 0.5rem;
  cursor: pointer;
  user-select: none;
  height: 52px;
  font-weight: 500;
  font-size: 16px;
  color: var(--fg);
}
@media (max-width: 375px) {
  .socialLoginBtn {
    font-size: 14px;
    padding: 0.25rem;
  }
}
.socialLoginBtn > div {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}
.socialLoginBtn > div div:has(svg) {
  position: absolute;
  left: 8px;
  top: 10px;
}
.socialLoginBtn > div .socialLoginBtn__text {
  flex-grow: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field-validation-error {
  color: var(--error);
  font-weight: 500;
  text-align: right;
}

.privacyPolicyCheckBox {
  display: grid;
  grid-template-columns: 1fr 40px;
  padding-inline: 0.75rem;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.privacyPolicyCheckBox p {
  text-align: right;
}
@media (max-width: 425px) {
  .privacyPolicyCheckBox p {
    text-align: left;
  }
}
.privacyPolicyCheckBox span {
  text-decoration: underline;
}
.privacyPolicyCheckBox .field--checkbox {
  margin-left: 0 !important;
  min-width: 40px;
}

.loginWithGoogleBtn {
  transition: background-color 0.3s, box-shadow 0.3s;
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  color: #757575;
  font-size: 16px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 20px 16px;
  width: 100%;
  text-align: center;
}
.loginWithGoogleBtn:hover {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.loginWithGoogleBtn:active {
  background-color: #eeeeee;
}
.loginWithGoogleBtn:focus {
  outline: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}
.loginWithGoogleBtn:disabled {
  filter: grayscale(100%);
  background-color: #ebebeb;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

/*# sourceMappingURL=User.css.map */