.field-component{display:flex;flex-flow:column;position:relative;margin-bottom:10px}@media (min-width: 768px){.field-component{margin-bottom:24px}}.field-component label{position:absolute;left:16px;top:16px;pointer-events:none;transition:all .2s;transform-origin:left;color:var(--gray-400)}.field-component input{border:1px solid var(--gray-150);box-shadow:0 2px 12px #bababa1f;border-radius:8px;background-color:var(--white);display:inline-flex;height:56px;padding:0 16px;width:auto;max-width:100%}.field-component input.no-shadow{box-shadow:none}.field-component input::placeholder{opacity:0}.field-component input:hover{border:1px solid var(--gray-400)}.field-component input:hover+label{color:var(--text-primary)}.field-component input:focus{border:1px solid var(--blue-500)}.field-component input:focus,.field-component input:not(:placeholder-shown){padding-top:16px;outline:none;box-shadow:none}.field-component input.error{border:1px solid var(--red-500)}.field-component input.error+label{color:var(--red-500)}.field-component:has(input:not([type=hidden]):focus) label,.field-component:has(input:not([type=hidden]):not(:placeholder-shown)) label{transform:translateY(-8px);color:var(--gray-500);font-size:12px}.field-component:has(input:not([type=hidden]):-webkit-autofill) label{transform:translateY(-8px);color:var(--gray-500);font-size:12px}.field-component span.error:not(:empty),.field-component em.error:not(:empty){color:var(--red-500);font-size:13px;margin-top:8px;line-height:14px;letter-spacing:.3px}