form.css

/*! style-forge.form 2025.2.5 | MIT License | https://github.com/Style-Forge/form */

:root{--sf-input-width:32px;--sf-input-hight:32px;--sf-disabled:0.4;--sf-elm-py:0.5em;--sf-elm-px:0.5em;--sf-c-form-white:0 0% 100%;--sf-c-form-info:200 100% 60%;--sf-c-form-error:0 100% 60%;--sf-c-form-success:0 100% 60%;--sf-c-form-warning:39 100% 50%;--sf-c-form-bg:0 0% 90%;--sf-c-form-bd:0 0% 10%;--sf-c-form-loading:0 0% 10%;--sf-c-form-txt:0 0% 10%;--sf-dark-c-form-white:0 0% 100%;--sf-dark-c-form-info:219 79% 66%;--sf-dark-c-form-error:0 100% 65%;--sf-dark-c-form-success:0 100% 65%;--sf-dark-c-form-warning:39 100% 60%;--sf-dark-c-form-bg:0 0% 20%;--sf-dark-c-form-bd:0 0% 100%;--sf-dark-c-form-loading:0 0% 100%;--sf-dark-c-form-txt:0 0% 90%}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-c-form-white:var(--sf-dark-c-form-white);--sf-c-form-bg:var(--sf-dark-c-form-bg);--sf-c-form-error:var(--sf-dark-c-form-error);--sf-c-form-success:var(--sf-dark-c-form-success);--sf-c-form-warning:var(--sf-dark-c-form-warning);--sf-c-form-info:var(--sf-dark-c-form-info);--sf-c-form-bd:var(--sf-dark-c-form-bd);--sf-c-form-loading:var(--sf-dark-c-form-loading);--sf-c-form-txt:var(--sf-dark-c-form-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:dark;--sf-c-form-white:var(--sf-dark-c-form-white);--sf-c-form-bg:var(--sf-dark-c-form-bg);--sf-c-form-error:var(--sf-dark-c-form-error);--sf-c-form-success:var(--sf-dark-c-form-success);--sf-c-form-warning:var(--sf-dark-c-form-warning);--sf-c-form-info:var(--sf-dark-c-form-info);--sf-c-form-bd:var(--sf-dark-c-form-bd);--sf-c-form-loading:var(--sf-dark-c-form-loading);--sf-c-form-txt:var(--sf-dark-c-form-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;text-transform:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;min-height:var(--sf-input-hight);padding:calc(var(--sf-elm-py) * 0.25) var(--sf-elm-px);box-sizing:border-box;vertical-align:top}@media only screen and (max-width:1024px){.sf-input{font-size:16px}}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-c-form-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-c-form-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{padding:4px 8px;min-height:32px}html.var .sf-input:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-input:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;text-align:center;text-decoration:none;text-transform:none;border-radius:3px;min-height:var(--sf-input-hight);padding:var(--sf-elm-py) var(--sf-elm-px);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}html.var .sf-button{padding:8px;min-height:32px}html.var .sf-button:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2)}html.var .sf-button:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-c-form-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-c-form-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-c-form-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:15px;font-family:inherit;font-weight:inherit;text-transform:none}.sf-select{padding:var(--sf-elm-py) var(--sf-elm-px);cursor:pointer;background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-elm-py) / 2) var(--sf-elm-px)}.sf-select optgroup{padding:calc(var(--sf-elm-py) / 2) 0 0}.sf-select:not([multiple]){min-height:var(--sf-input-hight);padding:0 var(--sf-elm-px);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select:not([multiple]){padding:0 0 0 8px;min-height:32px}html.var .sf-select{padding:8px 0 8px 8px}html.var .sf-select:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-select:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:15px;font-family:inherit;font-weight:inherit;line-height:1.499535;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border-style:solid;border-color:hsl(var(--sf-c-form-bd)/20%);border-width:1px;width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-elm-py)) * 4);padding:var(--sf-elm-py) var(--sf-elm-px);border-radius:3px;resize:vertical;overflow:auto;box-sizing:border-box}@media only screen and (max-width:1024px){.sf-textarea{font-size:16px}}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-c-form-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}html.var .sf-textarea{min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px}html.var .sf-textarea:not([class*='sf-c-']){color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2)}html.var .sf-textarea:not(.bd\:c\:ii){border-color:hsla(0,0%,10%,0.2)}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-c-form-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-c-form-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;border:0;width:auto;max-width:100%;min-height:var(--sf-input-hight);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);min-height:var(--sf-input-hight);border-radius:3px}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-c-form-txt));background:hsl(var(--sf-c-form-bg)/20%);border:1px solid hsl(var(--sf-c-form-bd)/20%);min-height:var(--sf-input-hight);border-radius:3px}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-c-form-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{padding:0;min-height:32px}html.var .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:32px}html.var .sf-input[type='file']::file-selector-button{color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:32px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:15px;font-family:inherit;font-weight:inherit;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{--sf-form-switch-size:1rem;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-c-form-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-c-form-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-c-form-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-c-form-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-c-form-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-c-form-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:12px;text-align:center;min-width:32px;padding:var(--sf-elm-py) var(--sf-elm-px);background:hsl(var(--sf-c-form-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-c-form-white));background:hsl(var(--sf-c-form-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:12px;margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-c-form-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-c-form-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}.sf-description,.sf-invalid,.sf-valid{color:hsl(var(--sf-c-form-txt)/40%);font-size:12px;font-family:inherit;font-weight:300;line-height:1;text-transform:none;margin-top:0.5em;padding-bottom:0.5em}html .sf-description{display:block}html .sf-invalid,html .sf-valid{display:none}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block !important}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none !important}.sf-invalid{color:hsl(var(--sf-c-form-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-c-form-txt))}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-invalid{display:block}.validates input[type='checkbox']:checked~.sf-invalid{display:none}.validates input[type='checkbox']:checked~.sf-valid{display:block}.validates:required:invalid:not(:focus){border-bottom-color:hsl(var(--sf-c-form-warning))}.validates:required:invalid:not(:disabled){border-bottom-color:hsl(var(--sf-c-form-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-c-form-error))}.error:not(:disabled),.validates:required:invalid:focus{border-bottom-color:hsl(var(--sf-c-form-error));outline:none}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-c-form-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4)}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var.grid .sf-description{display:block}html.var.grid .sf-invalid,html.var.grid .sf-valid{display:none}html.var.grid .validates:focus~.sf-description{display:none}html.var.grid .validates:focus~.validates~.sf-description{display:block}html.var.grid .validates input[type='checkbox']~.sf-invalid{display:block}html.var.grid .validates input[type='checkbox']:checked~.sf-invalid{display:none}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-input:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-textarea:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-select:not([class*='sf-c-']),html.var[data-theme='dark'] option,html.var.dark .sf-button:not([class*='sf-c-']),html.var.dark .sf-input:not([class*='sf-c-']),html.var.dark .sf-textarea:not([class*='sf-c-']),html.var.dark .sf-select:not([class*='sf-c-']),html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%)}html.var[data-theme='dark'] .sf-button:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-input:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-textarea:not(.bd\:c\:ii),html.var[data-theme='dark'] .sf-select:not(.bd\:c\:ii),html.var[data-theme='dark'] option,html.var.dark .sf-button:not(.bd\:c\:ii),html.var.dark .sf-input:not(.bd\:c\:ii),html.var.dark .sf-textarea:not(.bd\:c\:ii),html.var.dark .sf-select:not(.bd\:c\:ii),html.var.dark option{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-valid:not([class*='sf-c-']),html.var.dark .sf-description:not([class*='sf-c-']),html.var.dark .sf-valid:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-description:not([class*='sf-c-']),html.var[data-theme='dark'] .sf-valid:not([class*='sf-c-']),html.var.dark .sf-description:not([class*='sf-c-']),html.var.dark .sf-valid:not([class*='sf-c-']){color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid:not([class*='sf-c-']),html.var.dark .sf-invalid:not([class*='sf-c-']){color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none}