.input-box{margin-bottom:22px;padding-bottom:calc(1.4em + 5px);position:relative}.input-box .input{background-color:var(--canvas-raised);border:1px solid var(--ink-100);border-radius:var(--r-sm);transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out);padding:16px 14px 9px;position:relative}.input-box .input:not(:has(.disabled)):hover{border-color:var(--ink-300)}:is(.input-box .input:not(:has(.disabled)):has(input:focus),.input-box .input:not(:has(.disabled)):has(textarea:focus)){border-color:var(--accent-600);box-shadow:var(--ring)}:is(.input-box .input:has(input[blurred=true]:invalid),.input-box .input:has(textarea[blurred=true]:invalid)){border-color:var(--status-error);box-shadow:0 0 0 3px #c43c2a2e}:is(.input-box .input:has(input[blurred=true]:invalid) label,.input-box .input:has(textarea[blurred=true]:invalid) label){color:var(--status-error)}.input-box label{background-color:var(--canvas-raised);color:var(--ink-700);font-family:var(--font-ui);transform-origin:0 0;pointer-events:auto;z-index:1;-webkit-user-select:none;user-select:none;max-width:calc(133% - 55px);transition:color .15s var(--ease-out);padding:0 5px;font-size:14px;font-weight:500;line-height:1;display:block;position:absolute;top:0;left:0;transform:translate(10px,-1px)scale(.78)}.input-box label span{white-space:nowrap;text-overflow:ellipsis;margin-top:-6px;display:block;overflow:hidden}.input-box input{width:100%;font-family:var(--font-ui);color:var(--ink-900);background-color:#0000;border:0;outline:0;padding:0;font-size:15px;line-height:1.4}.input-box input::placeholder{color:var(--ink-300)}.input-box input:-webkit-autofill{-webkit-text-fill-color:var(--ink-900);caret-color:var(--ink-900);transition:background-color 100000s ease-in-out}.input-box input:-webkit-autofill:hover{-webkit-text-fill-color:var(--ink-900);caret-color:var(--ink-900);transition:background-color 100000s ease-in-out}.input-box input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink-900);caret-color:var(--ink-900);transition:background-color 100000s ease-in-out}.input-box input:-webkit-autofill:active{-webkit-text-fill-color:var(--ink-900);caret-color:var(--ink-900);transition:background-color 100000s ease-in-out}.input-box .input-line,.input-box .input-help{text-align:left;text-overflow:ellipsis;white-space:nowrap;padding:5px 14px 0;font-size:11px;line-height:1.4;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.input-box .input-line{color:var(--status-error);visibility:hidden}.input-box .input-help{color:var(--ink-500)}.input-box:has(.input-help--multiline){padding-bottom:0}.input-box .input-help--multiline{text-overflow:clip;white-space:normal;padding:6px 14px 0;display:block;position:static;overflow:visible}:is(.input-box:has(input[blurred=true]:invalid) .input-line,.input-box:has(textarea[blurred=true]:invalid) .input-line){visibility:visible}:is(.input-box:has(input[blurred=true]:invalid) .input-help,.input-box:has(textarea[blurred=true]:invalid) .input-help){visibility:hidden}.input-box[data-server-error=true] .input-line{visibility:visible}.input-box[data-server-error=true] .input-help{visibility:hidden}.input-box[data-server-error=true] .input{border-color:var(--status-error);box-shadow:0 0 0 3px #c43c2a2e}.input-box[data-server-error=true] .input label{color:var(--status-error)}
