.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  -webkit-appearance: none;
  border-radius: 0;
  background-color: #fff;
  text-overflow: ellipsis;
  background-clip: padding-box;
  border: 0.0625rem solid #caced3;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
  .form-control::-ms-expand {
    background-color: transparent;
    border: 0; }
  .form-control:focus {
    color: #464646;
    background-color: #fff;
    border-color: #efa603;
    outline: 0; }
    .form-control:focus ::placeholder {
      opacity: 0; }
  .form-control::-webkit-input-placeholder {
    color: #8d8d8d;
    opacity: 1;
    font-weight: 500; }
  .form-control::-moz-placeholder {
    color: #8d8d8d;
    opacity: 1;
    font-weight: 500; }
  .form-control:-ms-input-placeholder {
    color: #8d8d8d;
    opacity: 1;
    font-weight: 500; }
  .form-control::-ms-input-placeholder {
    color: #8d8d8d;
    opacity: 1;
    font-weight: 500; }
  .form-control::placeholder {
    color: #8d8d8d;
    opacity: 1;
    font-weight: 500; }
  .form-control:disabled, .form-control[readonly] {
    background-color: #e9ebee;
    opacity: 1;
    font-weight: 500; }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield; }

.field {
  display: flex;
  flex-flow: column; }
  .field input {
    font-size: 1rem;
    min-height: 4.5rem;
    padding: 2.2rem 1.5rem 1.25rem; }
  .field label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #8d8d8d; }
  .field label,
  .field input {
    transition: all 0.2s;
    touch-action: manipulation; }
  .field input:placeholder-shown + label {
    position: absolute;
    width: max-content;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(1.5rem, 1.5rem) scale(1.3); }
  .field ::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit; }
  .field :-moz-placeholder {
    opacity: 0;
    transition: inherit; }
  .field ::-moz-placeholder {
    opacity: 0;
    transition: inherit; }
  .field :-ms-input-placeholder {
    opacity: 0;
    transition: inherit; }
  .field ::-ms-input-placeholder {
    opacity: 0;
    transition: inherit; }
  .field input:focus::-webkit-input-placeholder {
    opacity: 1; }
  .field input:focus:-moz-placeholder {
    opacity: 1; }
  .field input:focus::-moz-placeholder {
    opacity: 1; }
  .field input:focus:-ms-input-placeholder {
    opacity: 1; }
  .field input:focus::-ms-input-placeholder {
    opacity: 1; }
  .field input:not(:placeholder-shown) + label,
  .field input:focus + label {
    position: absolute;
    max-width: max-content;
    transform: translate(1.5rem, 0.5rem) scale(1);
    pointer-events: none; }

