form-preview-df/dist/index.css

Resusable Form Preview Components

.df-form-comments{background:#fff;border-radius:8px;margin-top:.5rem}.dark .df-form-comments{background:var(--df-color-fb-container)}.df-form-comments__header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:.5rem}.df-form-comments__title{color:#374151;font-size:.875rem;font-weight:500;line-height:1.4;margin:0}.dark .df-form-comments__title{color:var(--df-color-text-light)}.df-form-comments__toggle{align-items:center;background:none;border:none;border-radius:4px;color:#1e40af;cursor:pointer;display:flex;justify-content:center;min-height:24px;min-width:24px;padding:.25rem;transition:all .2s ease}.df-form-comments__toggle:hover:not(:disabled){background-color:#f3f4f6}.df-form-comments__toggle:focus{outline:2px solid #3b82f6;outline-offset:2px}.df-form-comments__toggle:disabled{cursor:not-allowed;opacity:.5}.dark .df-form-comments__toggle{color:var(--df-color-primary)}.dark .df-form-comments__toggle:hover:not(:disabled){background-color:var(--df-color-fb-icon-bg)}.df-form-comments__toggle-icon{font-size:.75rem;font-weight:700;transition:transform .2s ease}.df-form-comments__toggle-icon--expanded{transform:rotate(180deg)}.df-form-comments__content{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease}.df-form-comments__content--expanded{max-height:200px;opacity:1}.df-form-comments__input-container{margin-bottom:.5rem}.df-form-comments__input-line{position:relative}.df-form-comments__input-line:after{background-color:#d1d5db;bottom:0;content:"";height:1px;left:0;position:absolute;right:0;transition:background-color .2s ease}.df-form-comments__input{background:transparent;border:none;color:#374151;font-size:.875rem;line-height:1.4;outline:none;padding:.5rem 0;width:100%}.df-form-comments__input::placeholder{color:#9ca3af}.df-form-comments__input:focus+.df-form-comments__input-line:after{background-color:#3b82f6}.df-form-comments__input:disabled{cursor:not-allowed;opacity:.6}.dark .df-form-comments__input{color:var(--df-color-text-light)}.dark .df-form-comments__input::placeholder{color:var(--df-color-text-muted)}.dark .df-form-comments__input:focus+.df-form-comments__input-line:after{background-color:var(--df-color-primary)}.df-form-comments .df-form-comments__input{background:transparent!important;background-color:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;color:#374151!important;font-family:inherit!important;font-size:.875rem!important;line-height:1.4!important;outline:none!important;padding:.5rem 0!important;width:100%!important}.df-form-comments .df-form-comments__input::placeholder{color:#9ca3af!important}.df-form-comments .df-form-comments__input:focus{border:none!important;box-shadow:none!important;outline:none!important}.df-form-comments .df-form-comments__input:disabled{cursor:not-allowed;opacity:.6}.dark .df-form-comments .df-form-comments__input{color:var(--df-color-text-light)!important}.dark .df-form-comments .df-form-comments__input::placeholder{color:var(--df-color-text-muted)!important}.form-component-content .component-preview .df-form-comments .df-form-comments__input{background:transparent!important;background-color:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;color:#374151!important;font-family:inherit!important;font-size:.875rem!important;line-height:1.4!important;outline:none!important;padding:.5rem 0!important;width:100%!important}.form-component-content .component-preview .df-form-comments .df-form-comments__input::placeholder{color:#9ca3af!important}.form-component-content .component-preview .df-form-comments .df-form-comments__input:focus{border:none!important;box-shadow:none!important;outline:none!important}.dark .form-component-content .component-preview .df-form-comments .df-form-comments__input{color:var(--df-color-text-light)!important}.dark .form-component-content .component-preview .df-form-comments .df-form-comments__input::placeholder{color:var(--df-color-text-muted)!important}.df-form-comments .df-form-comments__error{border-radius:4px;color:#dc2626;font-size:.675rem;margin-top:.25rem}.dark .df-form-comments .df-form-comments__error{color:var(--df-color-error-primary)}.notes-label-text{border-left:4px solid var(--df-color-primary);color:#374151;line-height:1.4;margin:.5rem 0;padding-left:.5rem}.notes-label-text.error-message{border-left-color:#dc2626;color:#dc2626}.notes-label-text.no-border{border-left:none;padding-left:0}.dark .notes-label-text.error-message{color:var(--df-color-error-primary)}@media (prefers-reduced-motion:no-preference){.df-form-comments__content{transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}}@media (prefers-reduced-motion:reduce){.df-form-comments__content,.df-form-comments__toggle-icon{transition:none}}@media (prefers-contrast:high){.df-form-comments__input-line:after{height:2px}.df-form-comments__toggle{border:1px solid}}.form-group.label-left .form-label{padding-top:0}.form-group.label-left .form-segment-wrapper{flex-direction:row;justify-content:flex-end}.form-group.label-top .form-label{white-space:normal;word-break:break-word}.form-group.label-top .form-segment-wrapper{justify-content:flex-start}.form-segment-wrapper{display:flex;flex-direction:column;gap:.25rem;width:100%}.form-segment-container{text-wrap:wrap;background-color:transparent;border:none;padding:0;width:fit-content}.form-segment-container.grid-layout{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;justify-content:flex-start}.form-segment-container.inline-layout{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem}.form-segment-option{align-items:center;display:flex;margin:0;position:relative}.form-segment-option .form-segment-radio{height:0;opacity:0;pointer-events:none;position:absolute;width:0}.form-segment-option .segment-button-label{align-items:center;background-color:#fff;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.375rem;justify-content:center;line-height:1;min-width:70px;padding:.5rem .875rem;transition:all .2s ease}.form-segment-option .segment-button-label:hover{background-color:#f8f9fa;border-color:#d0d7de}.form-segment-option .segment-button-label.pass-button{background-color:rgba(52,189,73,.078);color:#00814b}.form-segment-option .segment-button-label.pass-button:hover{background-color:#00814b;color:#fff}.form-segment-option .segment-button-label.fail-button{background:rgba(250,50,61,.078);color:#dc3545}.form-segment-option .segment-button-label.fail-button:hover{background-color:#dc3545;color:#fff}.form-segment-option.selected .segment-button-label.pass-button{background-color:#00814b;color:#fff}.form-segment-option.selected .segment-button-label.fail-button{background-color:#dc3545;color:#fff}.form-segment-option .segment-icon{align-items:center;display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:14px;justify-content:center;line-height:1;transition:color .2s ease;width:14px}.form-segment-option .segment-text{align-items:center;display:flex;font-size:.875rem;font-weight:500;justify-content:center;line-height:1}.form-segment-container.has-error .form-segment-option .segment-button-label{border-color:#dc3545}.form-segment-container.has-error .form-segment-option .segment-button-label:not(.selected){background-color:#fdf2f2}.form-segment-option .segment-button-label.is-disabled{cursor:not-allowed;opacity:.6;pointer-events:none}.segment-group{margin-bottom:1rem}.segment-group .form-label{color:var(--df-color-text-dark);font-size:.875rem;font-weight:500;margin-bottom:.5rem!important}.dark .segment-group .form-label{color:var(--df-color-text-light)}.segment-group .input-wrapper .mt-2{background-color:#fff;border:2px solid #e3f2fd;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-top:.5rem;padding:1rem}.dark .segment-group .input-wrapper .mt-2{background-color:var(--df-color-fb-container);border-color:var(--df-color-fb-border)}.segment-group.label-left .form-label{flex-shrink:0;margin-bottom:0;margin-right:1rem;max-width:60%;min-width:60%;white-space:normal;word-break:break-word}.segment-group.label-left .input-wrapper{flex:1;width:100%}.segment-group.label-left .mt-2{margin-top:0}.segment-group.label-top .form-label{margin-bottom:.5rem;margin-right:0}.segment-group.label-top .input-wrapper{width:100%}.segment-button{align-items:center;background-color:#f5f5f5;border:none;border-radius:6px;color:#666;cursor:pointer;display:flex;flex:1;font-size:.875rem;font-weight:600;justify-content:center;margin:0;min-height:48px;outline:none;padding:.75rem 1.5rem;position:relative;transition:all .2s ease}.segment-button:hover:not(.disabled){background-color:#e8e8e8;box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(-1px)}.segment-button:focus:not(.disabled){box-shadow:0 0 0 2px rgba(33,150,243,.3)}.segment-button.selected.red-chip{background-color:#f44336;box-shadow:0 2px 8px rgba(244,67,54,.3);color:#fff}.segment-button.selected.red-chip:hover:not(.disabled){background-color:#d32f2f;box-shadow:0 4px 12px rgba(244,67,54,.4);transform:translateY(-1px)}.segment-button.selected:not(.red-chip){background-color:#4caf50;box-shadow:0 2px 8px rgba(76,175,80,.3);color:#fff}.segment-button.selected:not(.red-chip):hover:not(.disabled){background-color:#388e3c;box-shadow:0 4px 12px rgba(76,175,80,.4);transform:translateY(-1px)}.segment-button:not(.selected).red-chip{background-color:#ffebee;border:1px solid #ffcdd2;color:#d32f2f}.segment-button:not(.selected).red-chip:hover:not(.disabled){background-color:#ffcdd2;border-color:#ef9a9a}.segment-button:not(.selected):not(.red-chip){background-color:#f5f5f5;color:#666}.segment-button:not(.selected):not(.red-chip):hover:not(.disabled){background-color:#e8e8e8}.segment-button.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed;opacity:.6}.segment-button.disabled:hover{box-shadow:none;transform:none}.dark .segment-button{background-color:var(--df-color-fb-container);color:var(--df-color-text-light)}.dark .segment-button:hover:not(.disabled){background-color:var(--df-color-fb-icon-bg)}.dark .segment-button.disabled{background-color:var(--df-color-fb-container);color:var(--df-color-text-light);opacity:.5}.segment-button .check-indicator,.segment-button .red-chip-indicator{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:18px;justify-content:center;margin-right:.5rem;width:18px}.segment-button .check-indicator,.segment-button .red-chip-indicator{background-color:hsla(0,0%,100%,.2);color:#fff}.segment-button .segment-label{flex:1;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.inline-segment-grid{align-items:stretch;display:flex;gap:.5rem}.inline-segment-grid .segment-button{flex:1;margin:0;min-height:48px}@media (max-width:768px){.inline-segment-grid{gap:.25rem}.inline-segment-grid .segment-button{font-size:.8rem;min-height:44px;padding:.5rem .75rem}}@media (max-width:480px){.inline-segment-grid{flex-direction:column;gap:.25rem}}.segment-vertical{display:flex;flex-direction:column;gap:.5rem}.segment-vertical .segment-button{justify-content:center;margin:0;text-align:center;width:100%}.inline-layout .inline-segment-grid{display:flex;gap:.5rem}.vertical-layout .segment-vertical{display:flex;flex-direction:column;gap:.5rem}.segment-button.selected{animation:segmentSelect .2s ease-out}@keyframes segmentSelect{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.segment-button:focus-visible{outline:2px solid var(--df-color-primary);outline-offset:2px}@media (prefers-contrast:high){.segment-button{border-width:3px}.segment-button.selected{border-width:4px}}@media (prefers-reduced-motion:reduce){.segment-button{transition:none}.segment-button:hover:not(.disabled){transform:none}.segment-button.selected{animation:none}}.comments-section{margin-top:1rem}.comments-section .comments-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem 0}.comments-section .comments-header .comments-label{color:#374151;font-size:.875rem;font-weight:500;margin:0}.comments-section .comments-header .comments-chevron{color:#6b7280;font-size:.75rem;transition:transform .2s ease}.comments-section .comments-header:hover .comments-chevron{color:#374151}.comments-section .comment-display{align-items:center;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;display:flex;justify-content:space-between;margin-top:.5rem;padding:.75rem}.comments-section .comment-display .comment-text{color:#374151;flex:1;font-size:.875rem;margin-right:.75rem;word-break:break-word}.comments-section .comment-display .edit-comment-btn{background-color:#3b82f6;border:none;border-radius:4px;color:#fff;cursor:pointer;flex-shrink:0;font-size:.75rem;font-weight:500;padding:.375rem .75rem;transition:background-color .2s ease}.comments-section .comment-display .edit-comment-btn:hover{background-color:#2563eb}.comments-section .comment-input-container{margin-top:.5rem}.comments-section .comment-input-container .comment-input{background:transparent;border:none;border-bottom:1px solid #d1d5db;color:#374151;font-size:.875rem;outline:none;padding:.5rem 0;width:100%}.comments-section .comment-input-container .comment-input::placeholder{color:#9ca3af}.comments-section .comment-input-container .comment-input:focus{border-bottom-color:#3b82f6}.comments-section .comment-input-container .comment-error{color:#dc2626;font-size:.75rem;font-weight:500;margin-top:.25rem}.notes-label-text{color:var(--df-color-text-dark);font-size:.875rem;font-weight:500;margin-bottom:.5rem}.notes-label-text.error-message{color:var(--df-color-error-primary)}.notes-label-text.no-border{background:none;border:none}.dark .notes-label-text{color:var(--df-color-text-light)}.dark .comment-input-section{background-color:var(--df-color-fb-container);border-color:var(--df-color-fb-border)}.table-scroll-container{scrollbar-color:var(--df-color-fb-border) var(--df-color-fb-icon-bg);scrollbar-width:thin}.table-scroll-container::-webkit-scrollbar{height:8px}.table-scroll-container::-webkit-scrollbar-track{background:var(--df-color-fb-icon-bg);border-radius:4px}.table-scroll-container::-webkit-scrollbar-thumb{background:var(--df-color-fb-border);border-radius:4px}.table-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--df-color-text-light)}.table-scroll-container{scroll-behavior:smooth}.table-cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:768px){.table-scroll-container{scrollbar-width:auto}.table-scroll-container::-webkit-scrollbar{height:12px}}.form-preview-container{display:flex;flex-direction:column;height:100%}.form-preview-wrapper{align-items:flex-start;display:flex;flex:1;justify-content:center;padding:2rem 1rem}.form-preview{border:2px solid var(--df-color-fb-border);border-radius:1rem;box-shadow:0 4px 6px rgba(0,0,0,.1);height:fit-content;min-height:400px;padding:1rem;transition:all .3s ease}.dark .form-preview,.form-preview{background:var(--df-color-fb-container)}.dark .form-preview{border-color:var(--df-color-fb-border);box-shadow:0 4px 6px rgba(0,0,0,.3)}.form-preview.device-desktop{max-width:1200px;min-width:800px;width:70%}.form-preview.device-tablet{max-width:768px;min-width:768px;width:768px}.form-preview.device-mobile{max-width:380px;min-width:380px;padding:1.5rem;width:380px}.form-preview.device-mobile .form-actions{flex-direction:column;gap:.5rem}.form-preview.device-mobile .form-actions .form-submit-button{width:100%}.form-preview.device-mobile .form-group{margin-bottom:1rem}.form-preview.readonly{cursor:not-allowed}.form-preview.readonly *{cursor:not-allowed!important;pointer-events:none}.form-preview.readonly button,.form-preview.readonly input,.form-preview.readonly label,.form-preview.readonly select,.form-preview.readonly textarea{cursor:not-allowed!important;user-select:none}.form-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.form-submit-button{background:var(--df-color-primary);border:none;border-radius:.5rem;color:var(--df-color-white);cursor:pointer;font-size:1rem;font-weight:500;padding:.75rem 1.5rem;transition:all .2s ease}.form-submit-button:hover:not(:disabled){background:var(--df-color-primary-hover);color:var(--df-color-primary-hover-text);transform:translateY(-1px)}.form-submit-button:disabled{background:var(--df-color-primary-disabled);cursor:not-allowed;opacity:.6;transform:none}.form-submit-button:active:not(:disabled){transform:translateY(0)}.empty-state{align-items:center;display:flex;justify-content:center;min-height:400px;padding:2rem}.empty-state .empty-state-card{border-radius:12px;max-width:600px;padding:2rem;width:100%}.dark .empty-state .empty-state-card{background:var(--df-color-fb-container);border-color:var(--df-color-fb-border);box-shadow:0 4px 6px rgba(0,0,0,.3)}.empty-state .empty-state-card .empty-state-preview-area{align-items:center;background:var(--df-color-fb-bg,#f9fafb);border:2px dashed var(--df-color-fb-border,#d1d5db);border-radius:8px;display:flex;justify-content:center;min-height:200px;transition:all .3s ease}.dark .empty-state .empty-state-card .empty-state-preview-area{background:var(--df-color-fb-bg);border-color:var(--df-color-fb-border)}.empty-state .empty-state-card .empty-state-preview-area:hover{background:rgba(59,130,246,.02);border-color:var(--df-color-primary,#3b82f6)}.dark .empty-state .empty-state-card .empty-state-preview-area:hover{background:rgba(59,130,246,.05)}.empty-state .empty-state-card .empty-state-preview-area .empty-state-placeholder{color:var(--df-color-text-light,#9ca3af);font-size:.875rem;text-align:center}.dark .empty-state .empty-state-card .empty-state-preview-area .empty-state-placeholder{color:var(--df-color-text-light,#6b7280)}.form-group{padding-bottom:.5rem;position:relative}.form-group:last-child{margin-bottom:0;padding-bottom:0}.form-group.df-form-heading{margin-bottom:0!important;padding-bottom:0!important}.form-group-label{color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.875rem;font-weight:500;margin-bottom:.5rem;opacity:.7;text-transform:uppercase}.dark .form-group-label{color:var(--df-color-text-light)}.required-indicator{color:var(--df-color-error-primary);margin-left:.25rem}@media (max-width:480px){.form-preview-wrapper{padding:1rem .5rem}.form-preview.device-mobile{padding:1rem}.form-preview.device-desktop,.form-preview.device-mobile,.form-preview.device-tablet{max-width:calc(100vw - 1rem);min-width:auto;width:100%}}@media (max-width:768px){.form-preview.device-tablet{max-width:calc(100vw - 2rem);min-width:auto;width:100%}}@media (max-width:1024px){.form-preview.device-desktop{max-width:calc(100vw - 2rem);min-width:auto;width:90%}}.form-preview .form-group{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.form-preview .form-group:focus-within .form-group-label{color:var(--df-color-primary)}.form-group.has-error .form-group-label{color:var(--df-color-error-primary)}.form-group.has-success .form-group-label{color:var(--df-color-success-primary)}.form-preview.loading{opacity:.7;pointer-events:none}.form-preview.loading:after{animation:spin 1s linear infinite;border:2px solid var(--df-color-primary);border-radius:50%;border-top:2px solid transparent;content:"";height:2rem;left:50%;margin:-1rem 0 0 -1rem;position:absolute;top:50%;width:2rem}input[type=date]::-webkit-datetime-edit-month-field,input[type=date]::-webkit-datetime-edit-text{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}input[type=date]::-webkit-datetime-edit-day-field,input[type=date]::-webkit-datetime-edit-year-field{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}input[type=date]:focus::-webkit-datetime-edit-day-field,input[type=date]:focus::-webkit-datetime-edit-month-field,input[type=date]:focus::-webkit-datetime-edit-text,input[type=date]:focus::-webkit-datetime-edit-year-field,input[type=date]:not([value=""])::-webkit-datetime-edit-day-field,input[type=date]:not([value=""])::-webkit-datetime-edit-month-field,input[type=date]:not([value=""])::-webkit-datetime-edit-text,input[type=date]:not([value=""])::-webkit-datetime-edit-year-field{color:var(--df-color-text-dark)}.dark input[type=date]::-webkit-datetime-edit-day-field,.dark input[type=date]::-webkit-datetime-edit-month-field,.dark input[type=date]::-webkit-datetime-edit-text,.dark input[type=date]::-webkit-datetime-edit-year-field,.dark input[type=date]:focus::-webkit-datetime-edit-day-field,.dark input[type=date]:focus::-webkit-datetime-edit-month-field,.dark input[type=date]:focus::-webkit-datetime-edit-text,.dark input[type=date]:focus::-webkit-datetime-edit-year-field{color:var(--df-color-text-light)}.dark input[type=date]:not([value=""])::-webkit-datetime-edit-day-field,.dark input[type=date]:not([value=""])::-webkit-datetime-edit-month-field,.dark input[type=date]:not([value=""])::-webkit-datetime-edit-text,.dark input[type=date]:not([value=""])::-webkit-datetime-edit-year-field{color:var(--df-color-text-light)}.form-control{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.form-control::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .form-control{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-control::placeholder{color:var(--df-color-text-light)!important}.form-control:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-control.is-invalid{border-color:var(--df-color-error-primary)}.form-control.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-control:disabled{background-color:var(--df-color-primary-disabled);cursor:not-allowed;opacity:.6}.form-control.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.form-control.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-control[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.form-control[readonly].form-textarea,.form-control[readonly][type=textarea]{background-color:#fff!important}fieldset{border:none;margin:0;padding:0}.form-label{color:var(--df-color-text-dark);display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;margin-bottom:.5rem}.form-label .required-indicator{color:var(--df-color-error-primary);margin-left:.25rem}.dark .form-label{color:var(--df-color-text-light)}.form-group{margin-bottom:1rem}.form-group.checkbox-group .form-label,.form-group.radio-group .form-label{color:var(--df-color-text-dark);font-size:.875rem;font-weight:400;margin-bottom:0!important;opacity:.7}.dark .form-group.checkbox-group .form-label,.dark .form-group.radio-group .form-label{color:var(--df-color-text-light)}.form-group.checkbox-group .mt-2.space-y-2,.form-group.radio-group .mt-2.space-y-2{background-color:#f8fafc;border:none;border-radius:8px;margin-top:.5rem;padding:.75rem}.dark .form-group.checkbox-group .mt-2.space-y-2,.dark .form-group.radio-group .mt-2.space-y-2{background-color:var(--df-color-fb-container)}.form-group.checkbox-group.label-left .form-label,.form-group.radio-group.label-left .form-label{flex-shrink:0;margin-bottom:0;margin-right:1rem;max-width:60%;min-width:60%;white-space:normal;word-break:break-word}.form-group.checkbox-group.label-left .input-wrapper,.form-group.radio-group.label-left .input-wrapper{flex:1;width:100%}.form-group.checkbox-group.label-left .mt-2.space-y-2,.form-group.radio-group.label-left .mt-2.space-y-2{margin-top:0}.form-group.checkbox-group.label-top .form-label,.form-group.radio-group.label-top .form-label{margin-bottom:.5rem;margin-right:0}.form-group.checkbox-group.label-top .input-wrapper,.form-group.radio-group.label-top .input-wrapper{width:100%}.form-group.label-top{display:flex;flex-direction:column}.form-group.label-top .form-label{margin-bottom:.5rem;margin-right:0}.form-group.label-top .input-wrapper{width:100%}.form-group.label-left{align-items:center;display:flex;flex-direction:row;margin-bottom:0!important;padding:1rem;padding-inline:0}.form-group.label-left .form-label{flex-shrink:0;margin-bottom:0;margin-right:1rem;max-width:60%;min-width:60%;white-space:normal;word-break:break-word}.form-group.label-left .input-wrapper{flex:1;width:100%}.form-check{align-items:center;background-color:var(--df-color-fb-input-bg);border:none;border-radius:6px;display:flex;margin-bottom:.5rem;padding:.75rem 1rem;transition:all .2s ease}.form-check:hover{background-color:var(--df-color-fb-icon-bg)}.form-check:last-child{margin-bottom:0}.form-check input[type=checkbox],.form-check input[type=radio]{background-color:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:3px;cursor:pointer;height:18px;margin-right:.75rem;width:18px}.form-check input[type=checkbox]:focus,.form-check input[type=radio]:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.1);outline:none}.form-check input[type=checkbox]:disabled,.form-check input[type=radio]:disabled{cursor:not-allowed;opacity:.5}.form-check input[type=radio]{border-radius:50%}.form-check input[type=checkbox]:checked,.form-check input[type=radio]:checked{background-color:var(--df-color-primary);border-color:var(--df-color-primary);color:var(--df-color-white)}.form-check label{color:var(--df-color-text-dark);cursor:pointer;flex:1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-size:.875rem;font-weight:400;line-height:1.5;margin-bottom:0}.form-check:disabled{cursor:not-allowed;opacity:.6}.form-check:disabled label{cursor:not-allowed}.dark .form-check{background-color:var(--df-color-fb-input-bg)}.dark .form-check:hover{background-color:var(--df-color-fb-icon-bg)}.dark .form-check label,.form-select{color:var(--df-color-text-dark)}.form-select{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.form-select::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .form-select{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-select::placeholder{color:var(--df-color-text-light)!important}.form-select:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-select.is-invalid{border-color:var(--df-color-error-primary)}.form-select.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-select:disabled{background-color:var(--df-color-primary-disabled);cursor:not-allowed;opacity:.6}.form-select.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.form-select.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-select[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.form-select[readonly].form-textarea,.form-select[readonly][type=textarea]{background-color:#fff!important}.form-group select.form-select,.form-select,.input-wrapper select.form-select,select.form-select{appearance:none!important;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E")!important;background-position:right .5rem center!important;background-repeat:no-repeat!important;background-size:1.5em 1.5em!important;padding-right:2.5rem!important}.form-textarea{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.form-textarea::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .form-textarea{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-textarea::placeholder{color:var(--df-color-text-light)!important}.form-textarea:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-textarea.is-invalid{border-color:var(--df-color-error-primary)}.form-textarea.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-textarea:disabled{background-color:var(--df-color-primary-disabled);cursor:not-allowed;opacity:.6}.form-textarea.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.form-textarea.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-textarea[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.form-textarea[readonly].form-textarea,.form-textarea[readonly][type=textarea]{background-color:#fff!important}.form-textarea{min-height:100px;resize:vertical}.form-date{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.form-date::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .form-date{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-date::placeholder{color:var(--df-color-text-light)!important}.form-date:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-date.is-invalid{border-color:var(--df-color-error-primary)}.form-date.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-date:disabled{background-color:var(--df-color-primary-disabled);cursor:not-allowed;opacity:.6}.form-date.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.form-date.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.form-date[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.form-date[readonly].form-textarea,.form-date[readonly][type=textarea]{background-color:#fff!important}.form-heading{color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:500;line-height:1.5}.form-heading.h1{font-size:2rem;font-weight:600}.form-heading.h2{font-size:1.5rem;font-weight:600}.form-heading.h3{font-size:1.25rem;font-weight:500}.form-heading.h4{font-size:1.125rem;font-weight:500}.form-heading.h5{font-size:1rem;font-weight:500}.form-heading.h6{font-size:.875rem;font-weight:500}.form-signature{border:1px solid var(--df-color-fb-border);border-radius:8px;cursor:crosshair;min-height:150px;transition:all .2s ease}.form-signature,.form-signature:focus{background:var(--df-color-fb-input-bg)}.form-signature:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.form-signature:hover{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .form-signature{border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .form-signature,.dark .form-signature:focus,.dark .form-signature:hover{background:var(--df-color-fb-input-bg)!important}.inline-options-grid{align-items:start;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.inline-options-grid .form-check{align-items:center;display:flex;height:auto;margin-bottom:0;min-height:auto;padding:.5rem .75rem}@media (max-width:768px){.inline-options-grid{gap:.25rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.inline-options-grid .form-check{padding:.375rem .5rem}}@media (max-width:480px){.inline-options-grid{gap:.25rem;grid-template-columns:1fr}}.inline-layout .inline-options-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.vertical-layout .space-y-2{display:flex;flex-direction:column;gap:.5rem}.form-error-msg{color:var(--df-color-error-primary);display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;margin-top:.25rem;min-height:1.25rem}.df-form-table.preview-mode .table-content table,.df-form-table.test-mode .table-content table{border:1px solid var(--df-color-fb-border);border-collapse:separate;border-spacing:0}.df-form-table.preview-mode .table-content table td,.df-form-table.preview-mode .table-content table th,.df-form-table.test-mode .table-content table td,.df-form-table.test-mode .table-content table th{border:1px solid var(--df-color-fb-border);padding:8px 12px;text-align:left;vertical-align:top}.df-form-table.preview-mode .table-content table th,.df-form-table.test-mode .table-content table th{background-color:var(--df-color-fb-container);font-weight:600;text-align:center}.df-form-table.preview-mode .table-content table td,.df-form-table.test-mode .table-content table td{background-color:transparent;min-height:40px}.df-form-table.preview-mode .table-content table td .component-content .form-group,.df-form-table.preview-mode .table-content table td .simple-table-component .form-group,.df-form-table.test-mode .table-content table td .component-content .form-group,.df-form-table.test-mode .table-content table td .simple-table-component .form-group{margin-bottom:0}.df-form-table.preview-mode .table-content table td .component-content .form-group .form-control,.df-form-table.preview-mode .table-content table td .component-content .form-group .form-select,.df-form-table.preview-mode .table-content table td .component-content .form-group .form-textarea,.df-form-table.preview-mode .table-content table td .simple-table-component .form-group .form-control,.df-form-table.preview-mode .table-content table td .simple-table-component .form-group .form-select,.df-form-table.preview-mode .table-content table td .simple-table-component .form-group .form-textarea,.df-form-table.test-mode .table-content table td .component-content .form-group .form-control,.df-form-table.test-mode .table-content table td .component-content .form-group .form-select,.df-form-table.test-mode .table-content table td .component-content .form-group .form-textarea,.df-form-table.test-mode .table-content table td .simple-table-component .form-group .form-control,.df-form-table.test-mode .table-content table td .simple-table-component .form-group .form-select,.df-form-table.test-mode .table-content table td .simple-table-component .form-group .form-textarea{border:1px solid var(--df-color-fb-border);min-height:auto;padding:4px 8px}.df-form-table.preview-mode .table-content table td .component-content .form-group .form-control:focus,.df-form-table.preview-mode .table-content table td .component-content .form-group .form-select:focus,.df-form-table.preview-mode .table-content table td .component-content .form-group .form-textarea:focus,.df-form-table.preview-mode .table-content table td .simple-table-component .form-group .form-control:focus,.df-form-table.preview-mode .table-content table td .simple-table-component .form-group .form-select:focus,.df-form-table.preview-mode .table-content table td .simple-table-component .form-group .form-textarea:focus,.df-form-table.test-mode .table-content table td .component-content .form-group .form-control:focus,.df-form-table.test-mode .table-content table td .component-content .form-group .form-select:focus,.df-form-table.test-mode .table-content table td .component-content .form-group .form-textarea:focus,.df-form-table.test-mode .table-content table td .simple-table-component .form-group .form-control:focus,.df-form-table.test-mode .table-content table td .simple-table-component .form-group .form-select:focus,.df-form-table.test-mode .table-content table td .simple-table-component .form-group .form-textarea:focus{border:1px solid var(--df-color-primary)}.df-form-table.preview-mode .table-content table td .simple-table-component .form-component,.df-form-table.test-mode .table-content table td .simple-table-component .form-component{background:transparent;border:none;margin:0;padding:0}.df-form-table.preview-mode .table-content table td .simple-table-component .form-component .component-actions,.df-form-table.preview-mode .table-content table td .simple-table-component .form-component .component-drag-handle,.df-form-table.test-mode .table-content table td .simple-table-component .form-component .component-actions,.df-form-table.test-mode .table-content table td .simple-table-component .form-component .component-drag-handle{display:none}.file-upload-wrapper{position:relative;width:100%}.file-upload-area{border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:.75rem 1rem;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.file-upload-area::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .file-upload-area{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .file-upload-area::placeholder{color:var(--df-color-text-light)!important}.file-upload-area:focus{border-color:var(--df-color-primary);box-shadow:0 0 0 2px rgba(var(--rgba-color-primary),.2);outline:none}.file-upload-area.is-invalid{border-color:var(--df-color-error-primary)}.file-upload-area.is-invalid:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.file-upload-area:disabled{background-color:var(--df-color-primary-disabled);cursor:not-allowed;opacity:.6}.file-upload-area.ng-invalid.ng-touched{border-color:var(--df-color-error-primary)}.file-upload-area.ng-invalid.ng-touched:focus{box-shadow:0 0 0 2px rgba(240,66,72,.2)}.file-upload-area[readonly]{background-color:var(--df-color-primary-disabled);opacity:.8}.file-upload-area[readonly].form-textarea,.file-upload-area[readonly][type=textarea]{background-color:#fff!important}.file-upload-area{align-items:center;background:var(--df-color-fb-input-bg);border:2px dashed var(--df-color-fb-border);cursor:pointer;display:flex;justify-content:center;min-height:120px;position:relative;text-align:center;transition:all .2s ease-in-out}.file-upload-area:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.file-upload-area.drag-over{background:var(--df-color-primary-light);border-color:var(--df-color-primary);transform:scale(1.02)}.file-upload-area.disabled,.file-upload-area.readonly{background:var(--df-color-fb-input-bg-disabled);cursor:not-allowed;opacity:.6}.file-upload-area.error{background:var(--df-color-fb-input-bg);border-color:var(--df-color-error)}.dark .file-upload-area{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border);color:var(--df-color-text-light)}.dark .file-upload-area:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.dark .file-upload-area.drag-over{background:var(--df-color-primary-light)}.dark .file-upload-area.disabled,.dark .file-upload-area.readonly{background:var(--df-color-fb-input-bg-disabled)}.dark .file-upload-area.error{background:var(--df-color-fb-input-bg);border-color:var(--df-color-error)}.upload-placeholder{align-items:center;display:flex;flex-direction:column;gap:.5rem;padding:1rem}.upload-placeholder .upload-icon{font-size:2rem;opacity:.6}.upload-placeholder .upload-text p{color:var(--df-color-text-medium);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;margin:0}.upload-placeholder .upload-text p.upload-hint{color:var(--df-color-text-light);font-size:.875rem}.dark .upload-placeholder .upload-text p{color:var(--df-color-text-light)}.dark .upload-placeholder .upload-text p.upload-hint{color:var(--df-color-text-medium)}.file-list{flex-direction:column;gap:.5rem;width:100%}.file-item,.file-list{display:flex;padding:.5rem}.file-item{align-items:center;background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:4px;gap:.75rem;transition:all .2s ease-in-out}.file-item:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.dark .file-item{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .file-item:hover{background:var(--df-color-fb-input-bg-hover);border-color:var(--df-color-primary)}.file-preview{align-items:center;border-radius:4px;display:flex;flex-shrink:0;height:40px;justify-content:center;overflow:hidden;width:40px}.file-preview .file-image{height:100%;object-fit:cover;width:100%}.file-preview .file-icon{font-size:1.5rem;opacity:.8}.file-info{flex:1;min-width:0}.file-info .file-name{color:var(--df-color-text-dark);font-weight:500;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-info .file-name,.file-info .file-size{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5}.file-info .file-size{font-size:.75rem;font-weight:400}.dark .file-info .file-name,.file-info .file-size{color:var(--df-color-text-light)}.dark .file-info .file-size{color:var(--df-color-text-medium)}.file-remove{align-items:center;background:var(--df-color-error-light);border:none;border-radius:50%;color:var(--df-color-error);cursor:pointer;display:flex;flex-shrink:0;font-size:.75rem;height:24px;justify-content:center;transition:all .2s ease-in-out;width:24px}.file-remove:hover{background:var(--df-color-error);color:#fff;transform:scale(1.1)}.file-remove:focus{outline:2px solid var(--df-color-primary);outline-offset:2px}.dark .file-remove{background:var(--df-color-error-light);color:var(--df-color-error)}.dark .file-remove:hover{background:var(--df-color-error);color:#fff}.file-add-more{align-items:center;background:var(--df-color-primary);border:1px solid var(--df-color-primary);border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;margin-top:.75rem;padding:.625rem 1rem;transition:all .2s ease-in-out;width:100%}.file-add-more:hover{background:var(--df-color-primary-dark);border-color:var(--df-color-primary-dark);box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(-1px)}.file-add-more:active{box-shadow:0 1px 2px rgba(0,0,0,.1);transform:translateY(0)}.file-add-more:focus{outline:2px solid var(--df-color-primary);outline-offset:2px}.file-add-more .file-add-icon{stroke:currentColor;height:16px;width:16px}.file-add-more .file-add-text{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:500;line-height:1.5}.dark .file-add-more{background:var(--df-color-primary);border-color:var(--df-color-primary);color:#fff}.dark .file-add-more:hover{background:var(--df-color-primary-dark);border-color:var(--df-color-primary-dark)}.dark .file-add-more .file-add-text{color:#fff}.file-image-display{gap:1rem}.file-image-container,.file-image-display{display:flex;flex-direction:column;width:100%}.file-image-container{background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:8px;gap:.75rem;padding:.75rem;transition:all .2s ease-in-out}.file-image-container:hover{border-color:var(--df-color-primary);box-shadow:0 2px 8px rgba(0,0,0,.1)}.dark .file-image-container{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .file-image-container:hover{border-color:var(--df-color-primary);box-shadow:0 2px 8px rgba(0,0,0,.2)}.file-image-preview{background:var(--df-color-fb-container);border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.1);max-height:500px;object-fit:contain;width:100%}.dark .file-image-preview{background:var(--df-color-fb-container);box-shadow:0 2px 4px rgba(0,0,0,.3)}.file-image-info{display:flex;flex-direction:column;gap:.25rem}.file-image-info .file-name{color:var(--df-color-text-dark);font-weight:500;word-break:break-word}.file-image-info .file-name,.file-image-info .file-size{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5}.file-image-info .file-size{font-size:.75rem;font-weight:400}.dark .file-image-info .file-name,.file-image-info .file-size{color:var(--df-color-text-light)}.dark .file-image-info .file-size{color:var(--df-color-text-medium)}.file-other-files{border-top:1px solid var(--df-color-fb-border);display:flex;flex-direction:column;gap:.5rem;padding-top:.75rem}.file-other-files .file-other-files-label{color:var(--df-color-text-medium);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-size:.875rem;font-weight:500;line-height:1.5;margin-bottom:.25rem}.dark .file-other-files{border-top-color:var(--df-color-fb-border)}.dark .file-other-files .file-other-files-label{color:var(--df-color-text-light)}.file-item-minimal{align-items:center;background:var(--df-color-fb-input-bg);border:1px solid var(--df-color-fb-border);border-radius:4px;display:flex;gap:.75rem;padding:.5rem;transition:all .2s ease-in-out}.file-item-minimal .file-icon{flex-shrink:0;font-size:1.25rem;opacity:.8}.file-item-minimal .file-info{flex:1;min-width:0}.file-item-minimal .file-info .file-name{color:var(--df-color-text-dark);font-size:14px;font-size:.875rem;font-weight:500;margin-bottom:.125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-minimal .file-info .file-name,.file-item-minimal .file-info .file-size{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5}.file-item-minimal .file-info .file-size{color:var(--df-color-text-light);font-size:14px;font-size:.75rem;font-weight:400}.dark .file-item-minimal{background:var(--df-color-fb-input-bg);border-color:var(--df-color-fb-border)}.dark .file-item-minimal .file-info .file-name{color:var(--df-color-text-light)}.dark .file-item-minimal .file-info .file-size{color:var(--df-color-text-medium)}.location-wrapper{position:relative;width:100%}.location-controls{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.location-btn{background:var(--df-color-fb-input-bg);border:2px solid var(--df-color-fb-border);border-radius:6px;color:var(--df-color-text-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5;transition:border-color .2s;transition:border-color .2s ease-in-out;width:100%}.location-btn::placeholder{color:var(--df-color-text-light);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;line-height:1.5}.dark .location-btn{background:var(--df-color-fb-input-bg)!important;border-color:var(--df-color-fb-border)!important;color:var(--df-color-text-light)!important}.dark .location-btn::placeho