:root {
  --button-color-outline: var(--color-border-tertiary);
  --button-color-text: var(--color-text-button);
  --button-color-text-hover: var(--color-text-secondary);
  --button-color-background-hover: var(--color-surface-secondary);
  --button-color-highlight-text: var(--button-color-text);
  --button-highlight-background: var(--color-surface-highlight);
  --button-highlight-color-background-hover: var(--button-color-background-hover);
  --button-highlight-color-text-hover: var(--button-color-text-hover);
}

.block__tlb-sign-up-form {
  padding: var(--spacing-xl) 0;
  background: var(--color-surface-tertiary);
  display: flex;
  justify-content: center;
}
.block__tlb-sign-up-form.done .wrapper form {
  opacity: 0;
}
.block__tlb-sign-up-form.done .complete {
  opacity: 1;
  font: var(--type-b2);
}
.block__tlb-sign-up-form .complete {
  opacity: 0;
  transition: opacity 0.5;
}
.block__tlb-sign-up-form .wrapper {
  width: 100%;
  max-width: var(--container-width);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.block__tlb-sign-up-form .wrapper .titles {
  text-align: center;
  margin-bottom: var(--spacing-md);
}
.block__tlb-sign-up-form .wrapper .titles h3 {
  font: var(--type-b3);
  margin-bottom: var(--spacing-sm);
}
.block__tlb-sign-up-form .wrapper .titles h2 {
  font: var(--type-h1);
  letter-spacing: -1.28px;
  margin-bottom: var(--spacing-smd);
}
.block__tlb-sign-up-form .wrapper .titles p {
  font: var(--type-b2);
}
.block__tlb-sign-up-form .wrapper form {
  width: 100%;
  max-width: 623px;
  display: flex;
  gap: 10px;
}
.block__tlb-sign-up-form .wrapper form .fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.block__tlb-sign-up-form .wrapper form .fields .field {
  position: relative;
  transition: margin 0.3s;
}
.block__tlb-sign-up-form .wrapper form .fields .field .error {
  position: absolute;
  top: 100%;
  left: 0;
  font: var(--type-b3);
  color: var(--color-text-primary);
  opacity: 0;
  transition: opacity 0.3s;
}
.block__tlb-sign-up-form .wrapper form .fields .field.has-error {
  margin-bottom: 24px;
}
.block__tlb-sign-up-form .wrapper form .fields .field.has-error .error {
  opacity: 1;
}
.block__tlb-sign-up-form .wrapper form .fields .field.text label, .block__tlb-sign-up-form .wrapper form .fields .field.email label {
  display: none;
}
.block__tlb-sign-up-form .wrapper form .fields .field.text input, .block__tlb-sign-up-form .wrapper form .fields .field.email input {
  width: 100%;
  font: var(--type-b3);
  padding: 14px 21px;
  border: none;
  background: var(--color-surface-primary);
  outline: none;
  border-radius: var(--radius-small);
  color: var(--color-text-primary);
}
.block__tlb-sign-up-form .wrapper form .fields .field.text input::-moz-placeholder, .block__tlb-sign-up-form .wrapper form .fields .field.email input::-moz-placeholder {
  color: var(--color-text-heading);
}
.block__tlb-sign-up-form .wrapper form .fields .field.text input::placeholder, .block__tlb-sign-up-form .wrapper form .fields .field.email input::placeholder {
  color: var(--color-text-heading);
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes, .block__tlb-sign-up-form .wrapper form .fields .field.radios {
  display: flex;
  background: var(--color-surface-primary);
  border-radius: var(--radius-small);
  padding: 14px 21px;
  gap: 10px;
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes > label, .block__tlb-sign-up-form .wrapper form .fields .field.radios > label {
  font: var(--type-b3);
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes .labels, .block__tlb-sign-up-form .wrapper form .fields .field.radios .labels {
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes .labels label, .block__tlb-sign-up-form .wrapper form .fields .field.radios .labels label {
  font: var(--type-b3);
  height: 24px;
  word-wrap: nowrap;
  display: block;
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes .options, .block__tlb-sign-up-form .wrapper form .fields .field.radios .options {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes .options .option, .block__tlb-sign-up-form .wrapper form .fields .field.radios .options .option {
  font: var(--type-b3);
  height: 24px;
  display: flex;
  align-items: center;
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes .options .option input, .block__tlb-sign-up-form .wrapper form .fields .field.radios .options .option input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--color-surface-primary);
  border: 3px solid var(--color-text-heading);
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes .options .option input[type=radio], .block__tlb-sign-up-form .wrapper form .fields .field.radios .options .option input[type=radio] {
  border-radius: 50%;
}
.block__tlb-sign-up-form .wrapper form .fields .field.checkboxes .options .option input:checked, .block__tlb-sign-up-form .wrapper form .fields .field.radios .options .option input:checked {
  background: var(--color-surface-highlight);
}
.block__tlb-sign-up-form .wrapper form .fields .field.textarea label {
  display: none;
}
.block__tlb-sign-up-form .wrapper form .fields .field.textarea textarea {
  width: 100%;
  font: var(--type-b3);
  padding: 14px 21px;
  border: none;
  background: var(--color-surface-primary);
  outline: none;
  border-radius: var(--radius-small);
  color: var(--color-text-primary);
}
.block__tlb-sign-up-form .wrapper form .fields .field.textarea textarea::-moz-placeholder {
  color: var(--color-text-heading);
}
.block__tlb-sign-up-form .wrapper form .fields .field.textarea textarea::placeholder {
  color: var(--color-text-heading);
}
.block__tlb-sign-up-form .wrapper form .fields .field.hidden {
  display: none;
}
.block__tlb-sign-up-form .wrapper form .submit button {
  white-space: nowrap;
  padding: 11px var(--spacing-smd);
  display: inline-block;
  font: var(--type-b3);
  border-radius: var(--radius-small);
  color: var(--button-color-text);
  transition: color 0.3s, background 0.3s;
  text-wrap: nowrap;
  transition: color 0.3s, background 0.3s, transform 0.3s;
  padding: 14px 21px;
  background: var(--color-surface-highlight);
  border: none;
  cursor: pointer;
}
.block__tlb-sign-up-form .wrapper form .submit button:hover {
  color: var(--button-color-text-hover);
  background: var(--button-color-background-hover);
}
@media screen and (max-width: 768px) {
  .block__tlb-sign-up-form {
    padding: var(--spacing-md) 0;
  }
  .block__tlb-sign-up-form .wrapper form {
    flex-direction: column;
    align-items: center;
  }
  .block__tlb-sign-up-form .wrapper form .fields .field.checkboxes, .block__tlb-sign-up-form .wrapper form .fields .field.radios {
    flex-wrap: wrap;
  }
  .block__tlb-sign-up-form .wrapper form .fields .field.checkboxes > label, .block__tlb-sign-up-form .wrapper form .fields .field.radios > label {
    width: 100%;
  }
}