.checkbox-multiselect-wrapper { position: relative; width: 100%; } .multiselect-input-container { position: relative; display: flex; align-items: flex-start; min-height: 38px; border: 1px solid #ced4da; border-radius: 0.25rem; background-color: #fff; cursor: text; padding: 4px 30px 4px 4px; flex-wrap: wrap; gap: 4px; } .multiselect-input-container:focus-within { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .multiselect-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; max-width: calc(100% - 150px); } .multiselect-tag { display: inline-flex; align-items: center; background-color: #e9ecef; border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 2px 8px; font-size: 0.875rem; line-height: 1.5; white-space: nowrap; } .multiselect-tag-remove { margin-left: 6px; cursor: pointer; color: #6c757d; font-weight: bold; border: none; background: none; padding: 0; font-size: 1rem; line-height: 1; } .multiselect-tag-remove:hover { color: #dc3545; } .multiselect-search { flex: 1 1 auto; min-width: 120px; border: none; outline: none; padding: 4px; font-size: 0.875rem; } .multiselect-search:focus { box-shadow: none; } .multiselect-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.5rem; line-height: 1; color: #6c757d; cursor: pointer; padding: 0; width: 20px; height: 20px; display: none; } .multiselect-clear:hover { color: #dc3545; } .multiselect-input-container.has-selections .multiselect-clear { display: block; } .multiselect-dropdown { position: absolute; left: 0; right: 0; background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); max-height: 300px; overflow-y: auto; z-index: 1000; display: none; } /* Открытие вверх (по умолчанию) */ .multiselect-dropdown { bottom: 100%; margin-bottom: 2px; } /* Открытие вниз (если места сверху недостаточно) */ .multiselect-dropdown.dropdown-below { bottom: auto; top: 100%; margin-top: 2px; margin-bottom: 0; } .multiselect-dropdown.show { display: block; } .multiselect-options { padding: 4px 0; } .multiselect-option { display: flex; align-items: center; padding: 8px 12px; cursor: pointer; margin: 0; transition: background-color 0.15s ease-in-out; } .multiselect-option:hover { background-color: #f8f9fa; } .multiselect-option input[type="checkbox"] { margin-right: 8px; cursor: pointer; } .multiselect-option .option-label { flex: 1; user-select: none; } .multiselect-option.hidden { display: none; }