:root{--depicter-field-bg-color: #fff;--depicter-field-border-color: #ccc;--depicter-field-font-size: 16px;--depicter-field-padding: 8px;--depicter-field-margin: 5px 0;--depicter-field-border-radius: 4px;--depicter-field-text-color: #000;--depicter-field-placeholder-color: #aaa;--depicter-field-focus-border-color: #007bff;--depicter-field-gap: 4px;--depicter-field-label-font-size: 14px;--depicter-field-label-color: #333;--depicter-field-description-font-size: 12px;--depicter-field-description-color: #666;--depicter-checkbox-width: 16px;--depicter-checkbox-height: 16px;--depicter-checkbox-border-color: #ccc;--depicter-checkbox-bg-color: #fff;--depicter-checkbox-checked-bg-color: #007bff;--depicter-checkbox-checkmark-color: #fff}.depicter-form-field{display:flex;flex-direction:column;gap:var(--depicter-field-gap)}.depicter-label-left .depicter-form-field{display:grid;grid-template-rows:repeat(2, auto);grid-template-columns:0 1fr;gap:0;row-gap:var(--depicter-field-gap)}.depicter-label-left .depicter-form-field:has(.depicter-field-label){grid-template-columns:30% 1fr;column-gap:var(--depicter-field-gap)}.depicter-label-left .depicter-form-field .depicter-field-label,.depicter-label-left .depicter-form-field label{grid-area:1/1/2/2}.depicter-label-left .depicter-form-field input,.depicter-label-left .depicter-form-field textarea.depicter-input,.depicter-label-left .depicter-form-field select,.depicter-label-left .depicter-form-field .depicter-choice-container{grid-area:1/2/2/3}.depicter-label-left .depicter-form-field .depicter-field-description{grid-area:2/2/3/3}.depicter-form-field label,.depicter-form-field .depicter-field-label{display:block;font-size:var(--depicter-field-label-font-size);color:var(--depicter-field-label-color)}.depicter-form-field label[for],.depicter-form-field .depicter-field-label[for]{cursor:pointer}.depicter-form-field input,.depicter-form-field textarea.depicter-input,.depicter-form-field select{display:block;width:100%;margin:0;padding:var(--depicter-field-padding);font-size:var(--depicter-field-font-size);color:var(--depicter-field-text-color);background-color:var(--depicter-field-bg-color);border:1px solid var(--depicter-field-border-color);border-radius:var(--depicter-field-border-radius);box-sizing:border-box;resize:none}.depicter-form-field input::placeholder,.depicter-form-field textarea.depicter-input::placeholder,.depicter-form-field select::placeholder{color:var(--depicter-field-placeholder-color)}.depicter-form-field input:focus,.depicter-form-field textarea.depicter-input:focus,.depicter-form-field select:focus{border-color:var(--depicter-field-focus-border-color);outline:none}.depicter-form-field .depicter-choice-container{display:flex;gap:var(--depicter-field-gap)}.depicter-form-field .depicter-choice-container input{order:1}.depicter-form-field .depicter-choice-container label{order:2}.depicter-form-field input[type=checkbox]{display:inline-block;width:var(--depicter-checkbox-width);height:var(--depicter-checkbox-height);margin:0;top:.1em;vertical-align:middle;appearance:none;box-sizing:border-box;position:relative;cursor:pointer;border:none;background:none}.depicter-form-field input[type=checkbox]::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--depicter-checkbox-bg-color);border:1px solid var(--depicter-checkbox-border-color);border-radius:2px}.depicter-form-field input[type=checkbox]:focus::before{border-color:var(--depicter-field-focus-border-color)}.depicter-form-field input[type=checkbox]::after{content:"";position:absolute;top:1px;left:5px;width:6px;height:12px;border:solid var(--depicter-checkbox-checkmark-color);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0.8);opacity:0;transition:opacity .2s ease-in-out}.depicter-form-field input[type=checkbox]:checked::before{background-color:var(--depicter-checkbox-checked-bg-color);border-color:var(--depicter-checkbox-checked-bg-color)}.depicter-form-field input[type=checkbox]:checked::after{opacity:1}.depicter-form-field input[type=number]::-webkit-inner-spin-button,.depicter-form-field input[type=number]::-webkit-outer-spin-button{opacity:0;transition:opacity .2s ease-in-out}.depicter-form-field input[type=number]:hover::-webkit-inner-spin-button,.depicter-form-field input[type=number]:hover::-webkit-outer-spin-button{opacity:1}.depicter-form-field p,.depicter-form-field .depicter-field-description{font-size:var(--depicter-field-description-font-size);color:var(--depicter-field-description-color)}
