#form-input-example{legend{font-weight:500}label{display:block}input[type=email],input[type=number],input[type=text]{appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input[type=email]:focus,input[type=number]:focus,input[type=text]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input[type=email]::placeholder,input[type=number]::placeholder,input[type=text]::placeholder{color:#6b7280;opacity:1}input[type=email]::-webkit-datetime-edit-fields-wrapper,input[type=number]::-webkit-datetime-edit-fields-wrapper,input[type=text]::-webkit-datetime-edit-fields-wrapper{padding:0}input[type=email]::-webkit-date-and-time-value,input[type=number]::-webkit-date-and-time-value,input[type=text]::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}input[type=email]::-webkit-datetime-edit,input[type=number]::-webkit-datetime-edit,input[type=text]::-webkit-datetime-edit{display:inline-flex}input[type=email]::-webkit-datetime-edit,input[type=email]::-webkit-datetime-edit-day-field,input[type=email]::-webkit-datetime-edit-hour-field,input[type=email]::-webkit-datetime-edit-meridiem-field,input[type=email]::-webkit-datetime-edit-millisecond-field,input[type=email]::-webkit-datetime-edit-minute-field,input[type=email]::-webkit-datetime-edit-month-field,input[type=email]::-webkit-datetime-edit-second-field,input[type=email]::-webkit-datetime-edit-year-field,input[type=number]::-webkit-datetime-edit,input[type=number]::-webkit-datetime-edit-day-field,input[type=number]::-webkit-datetime-edit-hour-field,input[type=number]::-webkit-datetime-edit-meridiem-field,input[type=number]::-webkit-datetime-edit-millisecond-field,input[type=number]::-webkit-datetime-edit-minute-field,input[type=number]::-webkit-datetime-edit-month-field,input[type=number]::-webkit-datetime-edit-second-field,input[type=number]::-webkit-datetime-edit-year-field,input[type=text]::-webkit-datetime-edit,input[type=text]::-webkit-datetime-edit-day-field,input[type=text]::-webkit-datetime-edit-hour-field,input[type=text]::-webkit-datetime-edit-meridiem-field,input[type=text]::-webkit-datetime-edit-millisecond-field,input[type=text]::-webkit-datetime-edit-minute-field,input[type=text]::-webkit-datetime-edit-month-field,input[type=text]::-webkit-datetime-edit-second-field,input[type=text]::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}input[type=email],input[type=number],input[type=text]{margin-top:.25rem;display:block;width:100%;--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-shadow:0 1px 2px 0 rgb(0 0 0/0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}input[type=email]::placeholder,input[type=number]::placeholder,input[type=text]::placeholder{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}input[type=email]:focus,input[type=number]:focus,input[type=text]:focus{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(212 212 212/var(--tw-ring-opacity,1));--tw-ring-opacity:0.5}input[type=email]:where(.dark,.dark *),input[type=number]:where(.dark,.dark *),input[type=text]:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity,1))}input[type=email]:where(.dark,.dark *),input[type=number]:where(.dark,.dark *),input[type=text]:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}input[type=email]:where(.dark,.dark *):focus,input[type=number]:where(.dark,.dark *):focus,input[type=text]:where(.dark,.dark *):focus{--tw-border-opacity:1;border-color:rgb(82 82 82/var(--tw-border-opacity,1))}input[type=email]:where(.dark,.dark *):focus,input[type=number]:where(.dark,.dark *):focus,input[type=text]:where(.dark,.dark *):focus{--tw-ring-opacity:1;--tw-ring-color:rgb(64 64 64/var(--tw-ring-opacity,1))}.help-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}&:has(>#dynamic-label-input){position:relative}&:has(>#dynamic-label-input){padding-top:3rem}label:has(+#dynamic-label-input){position:absolute}label:has(+#dynamic-label-input){top:1.5rem}label:has(+#dynamic-label-input){--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}label:has(+#dynamic-label-input){opacity:1}label:has(+#dynamic-label-input){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}label:has(+#dynamic-label-input){transition-duration:.2s}label:has(+#dynamic-label-input){transition-timing-function:cubic-bezier(0,0,.2,1)}label:has(+#dynamic-label-input:placeholder-shown){--tw-translate-y:1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}label:has(+#dynamic-label-input:placeholder-shown){opacity:0}input:required+.help-text:before{--tw-content:"*Required";content:var(--tw-content)}#optional-input:optional+.help-text:before{--tw-content:"*Optional";content:var(--tw-content)}div:has(>input:disabled) label{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}div:has(>input:disabled) label:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}input:disabled{cursor:not-allowed;--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}input:disabled:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(82 82 82/var(--tw-border-opacity,1))}input:disabled:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity,1))}input:read-only{cursor:not-allowed}input:read-only{--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity,1))}input:read-only{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity,1))}input:read-only{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}input:read-only:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(82 82 82/var(--tw-border-opacity,1))}input:read-only:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity,1))}#valid-input:valid{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity,1))}#valid-input:valid:focus{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity,1))}#valid-input:valid:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(187 247 208/var(--tw-ring-opacity,1))}#valid-input:valid:focus{--tw-ring-opacity:0.3}input:invalid{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}input:invalid:focus{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}input:invalid:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(252 165 165/var(--tw-ring-opacity,1))}input:invalid:focus{--tw-ring-opacity:0.3}input:invalid+.help-text:before{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}input[type=email]:invalid+.help-text:before{content:"You must enter a valid email."}input:out-of-range+.help-text{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}input:out-of-range+.help-text:before{content:"Out of range "}input[type=checkbox]:enabled{cursor:pointer}.checkbox{position:relative;user-select:none}.checkbox input[type=checkbox]+label{display:flex;align-items:center;gap:.5rem}.checkbox input[type=checkbox]:enabled+label{cursor:pointer}.checkbox input[type=checkbox]:disabled+label{cursor:not-allowed!important}.checkbox input[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.checkbox input[type=checkbox]+label:before{display:block;height:1rem;width:1rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(38 38 38/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.2s;--tw-content:"";content:var(--tw-content)}.checkbox input[type=checkbox]+label:where(.dark,.dark *):before{--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity,1))}.checkbox input[type=checkbox]+label:where(.dark,.dark *):before{--tw-bg-opacity:1;background-color:rgb(82 82 82/var(--tw-bg-opacity,1))}.checkbox input[type=checkbox]:disabled+label:before{--tw-border-opacity:1;border-color:rgb(163 163 163/var(--tw-border-opacity,1))}.checkbox input[type=checkbox]:disabled+label:where(.dark,.dark *):before{--tw-border-opacity:1;border-color:rgb(115 115 115/var(--tw-border-opacity,1))}.checkbox input[type=checkbox]:checked+label:before{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.checkbox input[type=checkbox]:checked+label:after{position:absolute;top:8px;left:.375rem;display:block;height:.5rem;width:.25rem;--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1));--tw-content:"";content:var(--tw-content);border-width:0 2px 2px 0}}