.page__form {
  margin-bottom: var(--padding-size);
  max-width: 45rem;
  color: var(--color-text-primary);
  font-size: .9rem;
  font-family: Inter, serif;
}

.page__form input, .page__form textarea, .page__form select, .page__form label {
  font-family: Inter, serif !important;
  font-size: .875rem;
}

.page__form-title {
  margin-top: var(--padding-size-max);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-text-primary);
}

.page__form-errors {
  margin-top: var(--padding-size);
}

.page__form-errors-item {
  font-weight: 900;
  color: var(--color-error);
}

.page__form-drawer {
  padding: var(--padding-size);
}

.page__form-drawer button[type="submit"] {
  width: 100% !important;
}

.page__form a {
  color: var(--color-text-primary);
}

.page__form-header-title {
  color: var(--color-text-primary);
  font-weight: bold;
  text-align: center;
}

.page__form-header-explanation {
  margin-top: var(--padding-size-min);
}

.page__form-header-breadcrumb {
  margin-top: var(--padding-size-min);
  color: var(--color-text-primary);
  text-align: center;
}

.page__form-header-breadcrumb a {
  color: var(--color-text-primary);
}

.page__form-row {
  position: relative;
  display: flex;
  margin-top: var(--padding-size-min);
  flex-direction: column;
  align-items: center;
}

.page__form-label {
  display: flex;
  width: 100%;
  flex-flow: column;
  color: var(--color-text-primary);
  font-size: 1rem;
}

.page__form-label span {
  font-size: .75rem;
}

.page__form-input {
  margin-top: .5rem;
  padding: .75rem;
  color: var(--color-text-primary);
  background: var(--color-background-form-element-primary);
  border-radius: .5rem;
  border: none;
  outline: none;
}

.page__form-button {
  margin-top: var(--padding-size-min);
  width: 12rem;
  padding: .75rem;
  background: var(--color-background-primary);
  color: var(--color-text-button);
  border-radius: .5rem;
  border: none;
  outline: none;
  cursor: pointer;
}

.page__form-wrapper {
  display: flex;
  margin-top: var(--padding-size-min);
  justify-content: space-between;
  align-items: baseline;
}

.page__form-separator {
  display: flex;
  align-items: center;
  margin: var(--padding-size) auto var(--padding-size) auto;
  width: 10.1875rem;
  height: 0.0625rem;
  line-height: 0.0625rem;
  justify-content: center;
  background: var(--color-text-primary);
}

.page__form-separator > div {
  padding: var(--padding-size-min);
  background: var(--color-drawer-items-background);
}

.page__form-login-social {
  width: 20.4rem;
  background: var(--color-text-button);
  border-radius: 2rem;
  padding: .8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}

.page__form-login-google:before {
  padding-right: 1rem;
  content: "\f1a0";
  font-size: 1.2rem;
  color: #ea4335;
}

.page__form-login-facebook:before {
  padding-right: 1rem;
  content: "\f39e";
  color: #3b5998;
  font-size: 1.2rem;
}

.page__form-row-wrapper {
  position: relative;
  display: flex;
  margin-top: var(--padding-size-min);
  min-width: 20rem;
  flex-flow: column wrap;
  align-items: stretch;
}

.page__form-row-wrapper .a__toggle-display:after, .page__form-row-wrapper .a__toggle-hide:after {
  top: 2.7rem !important;
}

.page__form-row-wrapper-autocomplete {
  position: relative;
}

.page__form-row-wrapper-autocomplete:after {
  position: absolute;
  display: flex !important;
  top: 2.5rem;
  content: "\f00d";
  color: var(--color-text-secondary);
  right: .7rem;
  pointer-events: all;
}

.page__form-row-wrapper-autocomplete:hover:after {
  cursor: pointer;
}

.page__form-autocomplete-container {
  position: absolute;
  top: 4rem;
  padding: 1rem;
  background: var(--color-background-secondary);
  border-radius: 0.5rem;
  overflow-y: auto;
  max-height: 20rem;
  z-index: 9999;
}

.page__form-autocomplete-container li {
  padding-bottom: var(--padding-size-min);
}

.page__form-autocomplete-container li:hover {
  cursor: pointer;
  text-decoration: underline;
}

.page__form input[type="radio"], .page__form input[type="checkbox"] {
  display: table-cell;
  vertical-align: middle;
  margin: 0 .4rem .2rem 0;
}

.page__form label {
  font-weight: bold;
  color: var(--color-text-primary);
  font-size: .875rem;
  /*margin-right: var(--padding-size);*/
}

.page__form input, .page__form select, .page__form textarea {
  margin-top: .5rem;
  padding: .75rem;
  color: var(--color-text-primary);
  background: var(--color-background-form-element-primary);
  border-radius: .5rem;
  border: none;
  outline: none;
}

.page__form button {
  margin-top: var(--padding-size-min);
  padding: .75rem;
  width: 100%;
  background: var(--color-background-form-button);
  color: var(--color-text-button);
  border-radius: .5rem;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1rem;
  flex-grow: 1;
}

.page__form-input-toggle {
  font-size: .9rem;
}

.page__form-helper {
  font-size: .9rem;
  color: var(--color-text-secondary);
  margin-bottom: inherit !important;
}

.page__form-row-wrapper-upload label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7rem;
  height: 7rem;
  font-size: 4rem;
  border-radius: .5rem;
  background: var(--color-background-form-element-primary);
}

.page__form-row-wrapper-upload-preview {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-color: initial !important;
}

.page__form-row-wrapper-upload-preview span {
  display: none;
}

.page__form-row-wrapper-upload label:hover {
  cursor: pointer;
}

.page__form-row-wrapper-upload input[type="file"] {
  position: absolute;
  width: .1rem;
  height: .1rem;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.page__form-label {
  position: relative;
  margin-top: var(--padding-size-min);
  font-weight: bold;
  color: var(--color-text-primary);
  font-size: .875rem;
}

label:has( + *[required])::after {
  content: " *" !important;
}

.page__form-label:has(input[required]) span:after {
  content: " *";
}

@media screen and (min-width: 769px) {
  .page__form button[type="submit"] {
    width: 20rem;
  }
}