/* Theme-aware form styles using CSS variables */

/* ============================================
   Form Controls - Base Styles
   ============================================ */

/* Basic form controls - neutral styling (not theme-colored) */

.form-control,
.modal .form-control,
.bit-modal .form-control,
#appointment-modal .form-control,
.modal-content .form-control {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: #212529 !important;
    background-color: #fff !important;
}

/* Height rules for non-textarea form controls */
.form-control:not(textarea),
.modal .form-control:not(textarea),
.bit-modal .form-control:not(textarea),
#appointment-modal .form-control:not(textarea),
.modal-content .form-control:not(textarea) {
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
}

.form-select,
.modal .form-select,
.bit-modal .form-select,
#appointment-modal .form-select,
.modal-content .form-select {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: #212529 !important;
    background-color: #fff !important;
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
}

/* Form-floating padding and height - must be taller to fit floating label */
.form-floating > .form-control,
.modal .form-floating > .form-control,
#appointment-modal .form-floating > .form-control {
    padding: 1.625rem 0.75rem 0.625rem 0.75rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Height rules for non-textarea form-floating controls */
.form-floating > .form-control:not(textarea),
.modal .form-floating > .form-control:not(textarea),
#appointment-modal .form-floating > .form-control:not(textarea) {
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
}

.form-floating > .form-select,
.modal .form-floating > .form-select,
#appointment-modal .form-floating > .form-select {
    padding: 1.625rem 2.25rem 0.625rem 0.75rem !important;
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Filter section form controls */
.filter-section-modern .form-control,
.filter-section-modern .form-select,
.filter-content .form-control,
.filter-content .form-select {
    font-size: var(--bit-form-field-font-size, 14px) !important;
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
}

/* Filter section form-floating wrapper - override Bootstrap's default min-height */
.filter-section-modern .form-floating,
.filter-content .form-floating {
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
}

.filter-section-modern .form-floating > .form-control,
.filter-section-modern .form-floating > .form-select,
.filter-content .form-floating > .form-control,
.filter-content .form-floating > .form-select {
    height: 100% !important;
    min-height: 100% !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Filter section floating labels */
.filter-section-modern .form-floating > label,
.filter-content .form-floating > label {
    font-size: var(--bit-form-field-font-size, 14px) !important;
    padding: 0.75rem !important;
}

/* Override Bootstrap's theme-colored borders */
.form-control:not(:focus),
.form-select:not(:focus),
.modal .form-control:not(:focus),
.modal .form-select:not(:focus) {
    border-color: #dee2e6 !important;
}

.form-control:focus,
.form-select:focus,
.modal .form-control:focus,
.modal .form-select:focus,
.bit-modal .form-control:focus,
.bit-modal .form-select:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: 0 !important;
}

/* Invalid state */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545 !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* Valid state */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #198754 !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
}

/* ============================================
   Compact Floating Labels
   ============================================ */

.compact-floating .form-floating {
    position: relative;
    min-height: var(--bit-form-field-height, 38px) !important;
    margin-bottom: 0.75rem;
}

.compact-floating .form-floating > .form-control {
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    padding: 0.5rem 0.75rem !important;
    padding-top: 1.375rem !important;
    padding-bottom: 0.25rem !important;
    font-size: var(--bit-form-field-font-size, 14px);
    line-height: 1.25;
    border-radius: 0.375rem;
}

.compact-floating .form-floating > .form-select {
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    padding: 0.5rem 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.375rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    line-height: 1.5 !important;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.compact-floating .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--bit-form-field-height, 38px) !important;
    padding: 0.75rem 0.75rem !important;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: all .1s ease-in-out;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: #6c757d;
    line-height: 1.4 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 1.5rem);
}

/* Adjust label height for select boxes */
.compact-floating .form-floating > .form-select ~ label {
    height: calc(var(--bit-form-field-height, 38px) + 4px) !important;
    line-height: 1.6 !important;
}

/* Floated state for all select labels and filled inputs */
.compact-floating .form-floating > .form-control:focus ~ label,
.compact-floating .form-floating > .form-control:not(:placeholder-shown) ~ label,
.compact-floating .form-floating > .form-select ~ label {
    opacity: .85;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    padding: 0 0.25rem !important;
    background-color: white;
    font-size: 1rem !important;
    color: #495057;
    height: auto !important;
    line-height: 1 !important;
}

.compact-floating .form-floating > .form-control:focus,
.compact-floating .form-floating > .form-control:not(:placeholder-shown),
.compact-floating .form-floating > .form-select {
    padding-top: 1.375rem !important;
    padding-bottom: 0.25rem !important;
}

/* Special padding for select to account for arrow */
.compact-floating .form-floating > .form-select {
    padding-top: 0.5rem !important;
    padding-bottom: 0.375rem !important;
}

.compact-floating .form-floating > textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
}

/* ============================================
   Checkboxes and Radio Buttons
   ============================================ */

.form-check-input {
    border-color: color-mix(in srgb, var(--bit-secondary, #6c757d) 40%, white) !important;
}

.form-check-input:checked {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
}

.form-check-input:focus {
    border-color: var(--bit-primary, #0d6efd) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bit-primary, #0d6efd) 25%, transparent) !important;
}

/* Radio button specific */
.form-check-input[type="radio"]:checked {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
}

/* ============================================
   Switch Toggles
   ============================================ */

/* Default switch uses primary color */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230d6efd'/%3e%3c/svg%3e");
}

/* Green Toggle Switch (Success State) */
.toggle-green:checked {
    background-color: var(--bit-success, #48bb78) !important;
    border-color: var(--bit-success, #48bb78) !important;
}

.toggle-green:focus {
    border-color: var(--bit-success, #48bb78) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bit-success, #48bb78) 25%, transparent) !important;
}

/* Red Toggle Switch (Danger State) */
.toggle-red:checked {
    background-color: var(--bit-danger, #dc3545) !important;
    border-color: var(--bit-danger, #dc3545) !important;
}

.toggle-red:focus {
    border-color: var(--bit-danger, #dc3545) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bit-danger, #dc3545) 25%, transparent) !important;
}

/* ============================================
   Form Labels and Help Text
   ============================================ */

.form-label {
    font-weight: 500;
    color: var(--bit-dark, #212529);
    margin-bottom: 0.5rem;
}

/* Smaller labels for listing page filters */
.filter-section-modern .form-label,
.filter-content .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0.5rem;
    color: #495057;
}

.form-text {
    color: var(--bit-secondary, #6c757d);
    font-size: var(--bit-form-field-font-size, 14px) !important;
    margin-top: 0.25rem;
}

/* ============================================
   Input Groups
   ============================================ */

.input-group-text {
    background-color: color-mix(in srgb, var(--bit-secondary, #6c757d) 10%, white) !important;
    border-color: color-mix(in srgb, var(--bit-secondary, #6c757d) 30%, white) !important;
    color: var(--bit-secondary, #6c757d) !important;
}

/* Primary variant input group */
.input-group.input-group-primary .input-group-text {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
    color: white !important;
}

/* ============================================
   Range Inputs
   ============================================ */

.form-range {
    --bs-form-range-track-bg: color-mix(in srgb, var(--bit-secondary, #6c757d) 25%, white);
    --bs-form-range-thumb-bg: var(--bit-primary, #0d6efd);
    --bs-form-range-thumb-active-bg: color-mix(in srgb, var(--bit-primary, #0d6efd) 75%, white);
}

.form-range:focus {
    --bs-form-range-thumb-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bit-primary, #0d6efd) 25%, transparent);
}

/* ============================================
   File Inputs
   ============================================ */

.form-control[type="file"] {
    cursor: pointer;
}

.form-control[type="file"]:hover {
    background-color: color-mix(in srgb, var(--bit-primary, #0d6efd) 5%, white) !important;
}

.form-control[type="file"]::file-selector-button {
    background-color: var(--bit-secondary, #6c757d) !important;
    color: white !important;
    border: none;
    padding: 0.375rem 0.75rem;
    margin-right: 0.5rem;
}

.form-control[type="file"]::file-selector-button:hover {
    background-color: color-mix(in srgb, var(--bit-secondary, #6c757d) 85%, black) !important;
}

/* ============================================
   Disabled States
   ============================================ */

.form-control:disabled,
.form-select:disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed;
}

.form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Validation Feedback
   ============================================ */

.invalid-feedback {
    color: var(--bit-danger, #dc3545) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    margin-top: 0.25rem;
}

.valid-feedback {
    color: var(--bit-success, #198754) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    margin-top: 0.25rem;
}

/* ============================================
   Form Sections and Fieldsets
   ============================================ */

fieldset {
    border: 1px solid color-mix(in srgb, var(--bit-secondary, #6c757d) 20%, white);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

legend {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bit-primary, #0d6efd);
    padding: 0 0.5rem;
    width: auto;
    margin-bottom: 0;
}

/* ============================================
   Custom Select Dropdown Styling
   ============================================ */

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* ============================================
   Textarea Auto-resize
   ============================================ */

/* Textareas use natural height based on rows attribute */
textarea.form-control {
    height: auto !important;
    resize: vertical;
}

/* ============================================
   Search Input Styling
   ============================================ */

input[type="search"].form-control {
    -webkit-appearance: textfield;
}

input[type="search"].form-control::-webkit-search-decoration,
input[type="search"].form-control::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================
   Color Input Styling
   ============================================ */

input[type="color"].form-control {
    max-width: 3rem;
    padding: 5px !important;
}

input[type="color"].form-control::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"].form-control::-webkit-color-swatch {
    border: 1px solid color-mix(in srgb, var(--bit-secondary, #6c757d) 30%, white);
    border-radius: 0.25rem;
}

/* ============================================
   TomSelect Autocomplete Fields
   ============================================ */

/* Global styling for all autocomplete fields */
.ts-wrapper,
.ts-wrapper.single,
.ts-wrapper.multi,
.ts-wrapper.form-select,
.ts-wrapper.form-control,
.ts-wrapper.form-control.form-select,
.modal .ts-wrapper,
.bit-modal .ts-wrapper {
    width: 100% !important;
    /* Reset form-select/form-control styles that conflict */
    padding: 0 !important;
    background-image: none !important;
    border: none !important;
    height: var(--bit-form-field-height, 38px) !important;
    min-height: var(--bit-form-field-height, 38px) !important;
}

/* Multi-select may need more height for multiple items */
.ts-wrapper.multi {
    height: auto !important;
    min-height: var(--bit-form-field-height, 38px) !important;
}

/* Form-floating TomSelect wrapper needs extra height for label */
.form-floating > .ts-wrapper,
.form-floating > .ts-wrapper.form-control,
.form-floating > .ts-wrapper.form-select,
.form-floating > .ts-wrapper.form-control.form-select {
    height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
}

.form-floating > .ts-wrapper.multi {
    height: auto !important;
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
}

.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select .ts-control,
.modal .ts-wrapper .ts-control,
.bit-modal .ts-wrapper .ts-control,
.modal-content .ts-wrapper .ts-control {
    border: 1px solid var(--bit-border-color, #dee2e6) !important;
    border-radius: 0.375rem !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    background-color: #fff !important;
    color: var(--bit-body-color, #212529) !important;
    flex-wrap: wrap !important;
}

/* Form-floating ts-control needs extra height */
.form-floating > .ts-wrapper .ts-control {
    min-height: calc(var(--bit-form-field-height, 38px) + 18px) !important;
    height: 100% !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

/* Ensure ts-control border stays neutral when not focused */
.ts-wrapper .ts-control:not(.focus),
.ts-wrapper.form-control .ts-control:not(.focus),
.ts-wrapper.form-select .ts-control:not(.focus),
.modal .ts-wrapper .ts-control:not(.focus),
.modal-content .ts-wrapper .ts-control:not(.focus) {
    border-color: var(--bit-border-color, #dee2e6) !important;
}

/* Input field within ts-control */
.ts-wrapper .ts-control input,
.ts-wrapper.single .ts-control input,
.ts-wrapper.multi .ts-control input {
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
    color: #212529 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ts-wrapper .ts-control input::placeholder {
    color: #6c757d !important;
    opacity: 0.65 !important;
}

.ts-wrapper .ts-control.focus,
.ts-wrapper.single .ts-control.focus,
.ts-wrapper.multi .ts-control.focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Selected items styling */
.ts-wrapper .ts-control .item,
.ts-wrapper.single .ts-control .item {
    background: transparent !important;
    color: #212529 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Form-floating Tom Select styling */
.form-floating > .ts-wrapper {
    height: calc(3.5rem + 2px);
}

.form-floating > .ts-wrapper .ts-control {
    height: 100% !important;
    min-height: calc(3.5rem + 2px) !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    padding-right: 2.25rem !important;
    border: 1px solid var(--bit-border-color, #dee2e6) !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

.form-floating > .ts-wrapper .ts-control input {
    padding: 0 !important;
    margin: 0 !important;
}

.form-floating > .ts-wrapper .ts-control .item {
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--bit-body-color, #212529) !important;
}

/* Floating label positioning for Tom Select */
.form-floating > .ts-wrapper ~ label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem 0.75rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: var(--bit-secondary, #6c757d);
}

/* Float label when has-items (value selected) */
.form-floating > .ts-wrapper.has-items ~ label,
.form-floating > .ts-wrapper .ts-control.focus ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    opacity: 0.65;
}

/* AHW Selected items in autocomplete (for multi-select) */
/*.ts-control .item {*/
/*    background-color: var(--bit-primary, #0d6efd) !important;*/
/*    color: white !important;*/
/*    border: none !important;*/
/*    border-radius: 0.25rem !important;*/
/*    padding: 0.25rem 0.5rem !important;*/
/*    font-size: 0.875rem !important;*/
/*    margin-right: 0.25rem !important;*/
/*    line-height: 1.25 !important;*/
/*}*/

/* Selected item for single-select (no background, just text) */
/*.ts-wrapper.single .ts-control .item {*/
/*    background-color: transparent !important;*/
/*    color: inherit !important;*/
/*    padding: 0 !important;*/
/*    margin: 0 !important;*/
/*    border-radius: 0 !important;*/
/*}*/

/*.ts-control .item .remove {*/
/*    color: white !important;*/
/*    opacity: 0.7;*/
/*    margin-left: 0.25rem;*/
/*}*/

/*.ts-control .item .remove:hover {*/
/*    opacity: 1;*/
/*}*/

/* Filter section TomSelect autocomplete fields - ensure border, dropdown arrow, and theme sizing */
.filter-section-modern .ts-wrapper .ts-control,
.filter-content .ts-wrapper .ts-control {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
    min-height: var(--bit-form-field-height, 38px) !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

/* Filter section form-floating TomSelect wrapper */
.filter-section-modern .form-floating > .ts-wrapper,
.filter-content .form-floating > .ts-wrapper {
    height: 100% !important;
    min-height: 100% !important;
}

.filter-section-modern .form-floating > .ts-wrapper .ts-control,
.filter-content .form-floating > .ts-wrapper .ts-control {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
    min-height: 100% !important;
    height: 100% !important;
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

.filter-section-modern .ts-wrapper .ts-control input,
.filter-content .ts-wrapper .ts-control input {
    font-size: var(--bit-form-field-font-size, 14px) !important;
}

.filter-section-modern .ts-wrapper .ts-control:focus,
.filter-section-modern .ts-wrapper .ts-control.focus,
.filter-content .ts-wrapper .ts-control:focus,
.filter-content .ts-wrapper .ts-control.focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Dropdown styling */
/*.ts-dropdown {*/
/*    border: 1px solid color-mix(in srgb, var(--bit-secondary, #6c757d) 30%, white) !important;*/
/*    border-radius: 0.375rem !important;*/
/*    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;*/
/*}*/

/*.ts-dropdown .option {*/
/*    padding: 0.5rem 0.75rem !important;*/
/*    font-size: 0.95rem !important;*/
/*}*/

/*.ts-dropdown .option.active {*/
/*    background-color: color-mix(in srgb, var(--bit-primary, #0d6efd) 10%, white) !important;*/
/*    color: var(--bit-dark, #212529) !important;*/
/*}*/

/*.ts-dropdown .option:hover,*/
/*.ts-dropdown .option.active:hover {*/
/*    background-color: var(--bit-primary, #0d6efd) !important;*/
/*    color: white !important;*/
/*}*/