@import '../../styles/variables.css';

.container {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex-flow: column nowrap;
}

.typeSelector {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  margin-bottom: var(--default-padding-large);

  @media (--medium) {
    flex-flow: row wrap;
  }

  @media (--small) {
    flex-flow: column nowrap;
  }
}

.type {
  margin: 0 var(--default-padding-small);
}

.input {
  display: block;
  margin-bottom: var(--default-padding-large);
}

.inputWrapper {
  width: 100%;
  position: relative;
}

.formWrapper {
  width: 100%;
}

.retry {
  position: absolute;
  bottom: 8px;
  right: var(--default-padding);
  cursor: pointer;
  line-height: 30px;
  color: var(--color-primary);
  z-index: calc(var(--z-index-input) + 5);
}

.resend {
  display: inline-block;
  cursor: pointer;
  color: var(--color-primary);
  margin-bottom: var(--default-padding-large);
}

.resendTimer {
  width: 100%;
  text-align: center;
  display: block;
  color: var(--cool-grey-two);
  margin-bottom: var(--default-padding-large);
}

.dataProcessingAgreement {
  color: #6d6c6f;
  text-align: center;
  margin-bottom: var(--default-padding-large);
  font-family: var(--default-font-family);
  font-size: var(--default-font-size-small);
}

.errorWrapper {
  font-family: var(--default-font-family);
  font-size: var(--default-font-size);
  text-align: center;
  padding: var(--default-padding) 0;
  margin-bottom: 20px;
}