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