.input{flex-direction:column;margin-bottom:16px;display:flex;position:relative}
.input input{width:100%;min-height:var(--form-height);border:var(--form-border);border-radius:var(--border-radius);color:var(--form-color);background:var(--form-background);font-size:var(--form-font-size);font-weight:var(--form-font-weight);-webkit-appearance:none;padding:12px 10px;transition:border-color .5s ease-in-out}
.input input::-webkit-input-placeholder{color:var(--form-placeholder-color)}.input input::-moz-placeholder{color:var(--form-placeholder-color)}.input input:-moz-placeholder-shown{color:var(--form-placeholder-color)}.input input:-ms-placeholder-shown{color:var(--form-placeholder-color)}
.input input.material{padding:20px 10px 7px}
.input input.material::-moz-placeholder{color:#0000;display:none}
.input input.material::placeholder{color:#0000;display:none}
.input input:-moz-placeholder-shown~.input__label--material.text{color:var(--form-placeholder-color);font-size:var(--font-size);top:14px}
.input input:placeholder-shown~.input__label--material.text{color:var(--form-placeholder-color);font-size:var(--font-size);top:14px}
.input input:not(:-moz-placeholder-shown){outline:none}
.input input:focus,.input input:not(:placeholder-shown){outline:none}
.input input:focus{border-color:var(--form-border-color-active);outline:none}
.input input:focus+.input__label--material.text{font-size:calc(var(--font-size) * .64);top:2px}
.input input:-webkit-autofill{border:var(--form-border);-webkit-text-fill-color:var(--form-color);-webkit-box-shadow:0 0 0px 1000px var(--form-background) inset;transition:background-color 5000s ease-in-out}.input input:-webkit-autofill:hover{border:var(--form-border);-webkit-text-fill-color:var(--form-color);-webkit-box-shadow:0 0 0px 1000px var(--form-background) inset;transition:background-color 5000s ease-in-out}.input input:-webkit-autofill:focus{border:var(--form-border);-webkit-text-fill-color:var(--form-color);-webkit-box-shadow:0 0 0px 1000px var(--form-background) inset;transition:background-color 5000s ease-in-out}
.input input.readonly{opacity:.5;cursor:not-allowed}
.input input:disabled{background-color:var(--form-background-disabled);cursor:not-allowed}
.input input.error{border-color:var(--bdtoow1f)}
.input input.success{border-color:var(--bdtoow19)}
.input input.right{text-align:right}
.input input.center{text-align:center}
.input input.left{text-align:left}
.input .input__label--material.text{color:var(--form-placeholder-color);font-size:calc(var(--font-size) * .64);pointer-events:none;transition:top .25s ease-in-out,left .25s ease-in-out,font-size .25s ease-in-out;display:inline-block;position:absolute;top:2px;left:10px}
.input__wrapper{position:relative}
.input__icon{top:calc((var(--form-height) - 1em) / 2);position:absolute}
.input__icon--right{right:12px}
.input__icon--right~input,.input__icon--right~input.material{padding-right:40px}
.input__icon--right~.input__label--material.text{padding-right:30px}
.input__icon--left{left:12px}
.input__icon--left~input,.input__icon--left~input.material{padding-left:40px}
.input__icon--left~.input__label--material.text{padding-left:30px}
.input__error{margin-top:4px;display:inline-block}
.input__success{margin-top:4px;display:inline-block}
.input__info{margin-top:8px;display:inline-block}
.input.disabled .input__icon svg{fill:var(--bdtoowm)}
.input__wrapper--suffix{border:var(--form-border);border-radius:var(--border-radius);background:var(--form-background);cursor:text;align-items:baseline;padding:0 10px;transition:border-color .5s ease-in-out;display:flex}
.input__wrapper--suffix.input__wrapper--center{justify-content:center}
.input__wrapper--suffix.input__wrapper--right{justify-content:flex-end}
.input__wrapper--suffix:focus-within{border-color:var(--form-border-color-active)}
.input__wrapper--suffix:has(input.error){border-color:var(--bdtoow1f)}
.input__wrapper--suffix:has(input.success){border-color:var(--bdtoow19)}
.input__wrapper--suffix:has(input:disabled){background-color:var(--form-background-disabled);cursor:not-allowed}
.input .input__wrapper--suffix input{min-height:calc(var(--form-height) - 2px);width:calc(var(--input-chars) * 1ch + 2px);background:0 0;border:none;flex:none;max-width:100%;padding-left:0;padding-right:0}
.input__suffix{color:var(--form-color);font-size:var(--form-font-size);font-weight:var(--form-font-weight);white-space:nowrap;pointer-events:none;padding-left:.25em}
@media screen and (min-width:576px){.input input:placeholder-shown~.input__label--material.text{top:12px}.input input:focus+.input__label--material.text{top:2px}}
@supports (field-sizing:content){.input .input__wrapper--suffix input{field-sizing:content;width:auto}}