.textInput {
  display: block;
  position: relative;
  padding-top: 1.25rem; }

.singleline, .multiline {
  color: #354042;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid #CED4DA;
  outline: 0;
  padding-left: 0.5rem;
  box-sizing: border-box;
  font: inherit; }
  .singleline:focus, .multiline:focus {
    border-color: #3CAFDA; }

.singleline {
  width: 100%; }

.multiline {
  display: block;
  height: 5rem;
  resize: vertical;
  width: 100%; }

.label {
  display: block;
  position: absolute;
  font-size: 1rem;
  top: 2.5rem;
  left: 1rem;
  transform: translatey(-50%);
  color: #CED4DA;
  opacity: 1;
  transition: top 120ms, left 120ms, font-size 120ms, color 120ms, opacity 120ms;
  pointer-events: none; }

.labelWithValue {
  top: 0.625rem;
  left: 0.75rem;
  font-size: 0.8409rem;
  color: #9DAAB1;
  transition: none; }

.labelWithFocus {
  top: 0.625rem;
  left: 0.75rem;
  font-size: 0.8409rem;
  color: #3CAFDA; }

.helper {
  color: #9DAAB1;
  display: block;
  font-size: 0.8409rem;
  text-align: right;
  padding-right: 0.5rem; }