.input-box{display:flex;align-items:center;position:relative;padding-top:7px;margin-bottom:var(--input-gap,1rem);box-sizing:border-box}.input-box .form-group{position:relative;width:100%;flex:1}.input-box .input-box-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:2;color:#333;font-size:1.5rem;pointer-events:none}.input-box .form-input{width:100%;height:48px;padding:0 12px;border:2px solid #e5e5e5;border-radius:8px;box-sizing:border-box;font-size:1rem;outline:none;background:#fff;transition:border-color .3s ease,box-shadow .3s ease;cursor:pointer}.input-box .form-input.has-icon{padding-left:3rem}.input-box .form-input.readonly:focus,.input-box .form-input:focus{border-color:#007bff;box-shadow:0 0 4px rgba(33,150,243,.4);caret-color:#000}.input-box .form-input.filled{border-color:#e5e5e5}.input-box .form-input.focused,.input-box .form-input.highlighted{border-color:#007bff}.input-box .form-input.error{border-color:red;box-shadow:0 0 5px rgba(211,47,47,.3)}.input-box .form-input.error.highlighted{border-color:red;box-shadow:0 0 8px rgba(211,47,47,.5);background:rgba(211,47,47,.05)}.input-box .form-input::-moz-placeholder{color:transparent}.input-box .form-input::placeholder{color:transparent}.input-box .form-input.readonly{background:#f5f5f5;cursor:not-allowed;color:#999}.input-box .form-input.readonly:focus{box-shadow:0 0 4px rgba(33,150,243,.4)}.input-box .form-input.readonly.highlighted{box-shadow:0 0 6px rgba(33,150,243,.4);background:#f5f5f5}.input-box .form-input:disabled{background:gray;cursor:not-allowed;color:#333}.input-box .form-input:disabled:focus{border-color:#007bff;box-shadow:0 0 4px rgba(33,150,243,.4)}.input-box .form-input:disabled.highlighted{border-color:#007bff;box-shadow:0 0 6px rgba(33,150,243,.4)}.input-box .form-label{position:absolute;top:50%;left:12px;transform:translateY(-50%);font-size:1rem;color:#333;background:transparent;padding:0;transition:all .2s ease-in-out;pointer-events:none}.input-box .form-label.has-icon{left:3rem}.input-box .form-label.highlighted{color:#007bff;font-weight:500}.input-box .form-input:not(:-moz-placeholder-shown)~.form-label{top:0;font-size:.8rem;background:#fff;padding:0 4px}.input-box .form-input.filled~.form-label,.input-box .form-input:focus~.form-label,.input-box .form-input:not(:placeholder-shown)~.form-label{top:0;font-size:.8rem;background:#fff;padding:0 4px}.input-box .form-input:not(:-moz-placeholder-shown)~.form-label.has-icon{left:12px}.input-box .form-input.filled~.form-label.has-icon,.input-box .form-input:focus~.form-label.has-icon,.input-box .form-input:not(:placeholder-shown)~.form-label.has-icon{left:12px}.input-box .form-input:focus~.form-label{color:#007bff}.input-box .form-input.highlighted~.form-label{color:#007bff;font-weight:500}.input-box .form-input:not(:focus):not(:-moz-placeholder-shown)~.form-label{color:#333}.input-box .form-input.filled:not(:focus)~.form-label,.input-box .form-input:not(:focus):not(:placeholder-shown)~.form-label{color:#333}.input-box .form-input.highlighted:not(:focus):not(:-moz-placeholder-shown)~.form-label{color:#007bff}.input-box .form-input.filled.highlighted:not(:focus)~.form-label,.input-box .form-input.highlighted:not(:focus):not(:placeholder-shown)~.form-label{color:#007bff}.input-box .form-input.error~.form-label{color:red}.input-box .form-input.error.highlighted~.form-label{color:red;font-weight:500}.input-box .form-input:disabled~.form-label{top:50%;transform:translateY(-50%);font-size:1rem;color:#333;background:transparent;padding:0}.input-box .form-input.no-label~.form-label{display:none}.input-box .error-message{position:absolute;bottom:-14px;right:12px;color:red;font-size:.8rem;background:#fff;padding:0 4px;z-index:1;white-space:nowrap}.input-box.highlighted .form-input{position:relative}.input-box.highlighted .form-input:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:2px solid transparent;border-radius:8px;background:linear-gradient(45deg,#007bff,#66b0ff);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:highlightPulse 2s ease-in-out infinite;z-index:-1}@keyframes highlightPulse{0%,to{opacity:.6}50%{opacity:1}}