[type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select { --tw-border-opacity: 1; border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity)); } .form-check { display: flex; align-items: center; } .form-check-label { margin-left: 0.5rem; cursor: pointer; } .form-check-input { transition-property: all; transition-duration: 100ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .form-check-input[type="radio"] { cursor: pointer; --tw-border-opacity: 1; border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity)); --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); } .form-check-input[type="radio"]:focus { --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(4px + 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-color: rgb(var(--color-primary) / var(--tw-ring-opacity)); --tw-ring-opacity: 0.2; --tw-ring-offset-width: 0px; } .dark .form-check-input[type="radio"] { border-color: transparent; --tw-bg-opacity: 1; background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity)); } .dark .form-check-input[type="radio"]:focus { --tw-ring-color: rgb(var(--color-slate-700) / var(--tw-ring-opacity)); --tw-ring-opacity: 0.5; } .form-check-input[type="radio"]:checked { border-color: rgb(var(--color-primary) / var(--tw-border-opacity)); --tw-border-opacity: 0.1; --tw-bg-opacity: 1; background-color: rgb(var(--color-primary) / var(--tw-bg-opacity)); } .form-check-input[type="radio"]:disabled:not(:checked) { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity)); } .dark .form-check-input[type="radio"]:disabled:not(:checked) { background-color: rgb(var(--color-darkmode-800) / 0.5); } .form-check-input[type="radio"]:disabled:checked { cursor: not-allowed; opacity: 0.7; } .dark .form-check-input[type="radio"]:disabled:checked { background-color: rgb(var(--color-darkmode-800) / 0.5); } .form-check-input[type="checkbox"] { cursor: pointer; border-radius: 0.25rem; --tw-border-opacity: 1; border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity)); --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); } .form-check-input[type="checkbox"]:focus { --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(4px + 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-color: rgb(var(--color-primary) / var(--tw-ring-opacity)); --tw-ring-opacity: 0.2; --tw-ring-offset-width: 0px; } .dark .form-check-input[type="checkbox"] { border-color: transparent; --tw-bg-opacity: 1; background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity)); } .dark .form-check-input[type="checkbox"]:focus { --tw-ring-color: rgb(var(--color-slate-700) / var(--tw-ring-opacity)); --tw-ring-opacity: 0.5; } .form-check-input[type="checkbox"]:checked { border-color: rgb(var(--color-primary) / var(--tw-border-opacity)); --tw-border-opacity: 0.1; --tw-bg-opacity: 1; background-color: rgb(var(--color-primary) / var(--tw-bg-opacity)); } .form-check-input[type="checkbox"]:disabled:not(:checked) { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity)); } .dark .form-check-input[type="checkbox"]:disabled:not(:checked) { background-color: rgb(var(--color-darkmode-800) / 0.5); } .form-check-input[type="checkbox"]:disabled:checked { cursor: not-allowed; opacity: 0.7; } .dark .form-check-input[type="checkbox"]:disabled:checked { background-color: rgb(var(--color-darkmode-800) / 0.5); } .form-switch .form-check-input { width: 38px; height: 24px; padding: 1px; position: relative; border-radius: 9999px; background-image: none; } .form-switch .form-check-input:before { content: ""; width: 20px; height: 20px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); transition-property: margin-left; position: absolute; top: 0px; bottom: 0px; margin-top: auto; margin-bottom: auto; border-radius: 9999px; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .dark .form-switch .form-check-input:before { --tw-bg-opacity: 1; background-color: rgb(var(--color-darkmode-600) / var(--tw-bg-opacity)); } .form-switch .form-check-input:checked { --tw-border-opacity: 1; border-color: rgb(var(--color-success) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(var(--color-success) / var(--tw-bg-opacity)); } .form-switch .form-check-input:checked::before { margin-left: 14px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } /* Default Form Control */ .form-control { width: 100%; border-radius: 0.375rem; --tw-border-opacity: 1; border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity)); font-size: 0.875rem; line-height: 1.25rem; --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); transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .form-control::-moz-placeholder { color: rgb(var(--color-slate-400) / 0.9); } .form-control:-ms-input-placeholder { color: rgb(var(--color-slate-400) / 0.9); } .form-control::placeholder { color: rgb(var(--color-slate-400) / 0.9); } .form-control:focus { border-color: rgb(var(--color-primary) / var(--tw-border-opacity)); --tw-border-opacity: 0.4; --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(4px + 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-color: rgb(var(--color-primary) / var(--tw-ring-opacity)); --tw-ring-opacity: 0.2; } .dark .form-control { border-color: transparent; --tw-bg-opacity: 1; background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity)); transition-property: none; } .dark .form-control::-moz-placeholder { color: rgb(var(--color-slate-500) / 0.8); } .dark .form-control:-ms-input-placeholder { color: rgb(var(--color-slate-500) / 0.8); } .dark .form-control::placeholder { color: rgb(var(--color-slate-500) / 0.8); } .dark .form-control:focus { --tw-ring-color: rgb(var(--color-slate-700) / var(--tw-ring-opacity)); --tw-ring-opacity: 0.5; } .form-control:disabled, .form-control[readonly] { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity)); } .dark .form-control:disabled, .dark .form-control[readonly] { border-color: transparent; background-color: rgb(var(--color-darkmode-800) / 0.5); } /* Default Sizes */ .form-control-sm { padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; line-height: 1rem; } .form-control-lg { padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 1rem; padding-right: 1rem; font-size: 1.125rem; line-height: 1.75rem; } /* Form Control Rounded */ .form-control-rounded { border-radius: 9999px; } .form-help { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--color-slate-500) / var(--tw-text-opacity)); } .form-inline { display: flex; align-items: center; } .form-inline .form-label { margin-bottom: 0px; margin-right: 1.25rem; text-align: right; } .form-inline .form-control { flex: 1 1 0%; } .form-label { margin-bottom: 0.5rem; display: inline-block; } /* Default Form Select */ .form-select { width: 100%; border-radius: 0.375rem; --tw-border-opacity: 1; border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity)); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.75rem; padding-right: 2rem; font-size: 0.875rem; line-height: 1.25rem; --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); transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .form-select:focus { border-color: rgb(var(--color-primary) / var(--tw-border-opacity)); --tw-border-opacity: 0.4; --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(4px + 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-color: rgb(var(--color-primary) / var(--tw-ring-opacity)); --tw-ring-opacity: 0.2; } .dark .form-select { border-color: transparent; --tw-bg-opacity: 1; background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity)); } .dark .form-select:focus { --tw-ring-color: rgb(var(--color-slate-700) / var(--tw-ring-opacity)); --tw-ring-opacity: 0.5; } .form-select:disabled, .form-select[readonly] { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity)); } .dark .form-select:disabled, .dark .form-select[readonly] { background-color: rgb(var(--color-darkmode-800) / 0.5); } /* Default Sizes */ .form-select-sm { padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 0.5rem; padding-right: 2rem; font-size: 0.75rem; line-height: 1rem; } .form-select-lg { padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 1rem; padding-right: 2rem; font-size: 1.125rem; line-height: 1.75rem; }