.field {
  margin: 20px 0 0 0;
  position: relative;
}

.field .btn {
  padding: 0 15px;
}

.field-text label {
  display: block;
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 3px;
}

.field-text label,
.field-text input,
.field-text .form-help,
.field-text textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

.field-text input,
.field-text textarea {
  padding: 8px 30px 8px 8px;
  border: 1px solid var(--vt-border-color);
  border-radius: 3px;
}

.field-text :focus {
  outline: 0;
  box-shadow: 0 0 5px rgba(93, 162, 248, 0.5);
  border-color: var(--vt-color-primary);
}

.field-text :invalid {
  border-color: var(--vt-color-danger);
  box-shadow: 0 0 5px rgba(229, 43, 37, 0.5);
}

.form-help {
  display: block;
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  transition: all 0.05s linear;
}

input:focus + .form-help {
  padding: 8px;
  margin-top: 5px;
  border: 1px solid var(--vt-color-warning);
  border-radius: 3px;
  font-style: italic;
  font-size: 13px;
  color: var(--vt-text-color);
  background-color: var(--vt-bg-color-grey);
  position: relative;
  width: auto;
  height: auto;
  crop: none;
}

input:disabled, textarea:disabled {
  background-color: var(--vt-bg-color-grey);
}

@media only screen and (min-width: 900px) {
  .field {
    width: 500px;
  }
}