.org_custom_matter_fields_fields {
  border-left: 1px solid #e8eaed;
  border-top: 1px solid #e8eaed;
  width: 100%;
  max-width: 700px;
}

.ocmf-header {
  display: flex;
  border-bottom: 1px solid #e8eaed;
}
.ocmf-body > div {
  display: flex;
  border-bottom: 1px solid #e8eaed;
}
.org_custom_matter_fields_fields > div > div:nth-child(odd) {
  background-color: #f7f9fc;
}

.ocmf-header div {
  font-weight: bold;
  padding: 7px;
  border-right: 1px solid #e8eaed;
}
.ocmf-body > div > div {
  padding: 7px;
  border-right: 1px solid #e8eaed;
}
div.ocmf-sort {
  width: 5%;
}
div.ocmf-name {
  width: 51%;
}
div.ocmf-type {
  width: 14%;
}
div.ocmf-required {
  width: 11%;
}
div.ocmf-intake {
  width: 9%;
}
div.ocmf-actions {
  width: 10%;
}
.org_custom_matter_fields_actions {
  margin-top: 20px;
}
.org-custom-fields-multiple {
  display: none;
}

#edit-custom-fields-wrapper {
  padding: 0;
  border: none;
}

#node-matter-edit-form #edit-custom-fields-wrapper {
  padding: 0 48px;
  border-right: 1px solid #dee0e3;
  border-left: 1px solid #dee0e3;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  margin-top: -30px;
  margin-bottom: 0;
}
#node-matter-edit-form #edit-custom-fields-wrapper input[type='date'] {
  width: 100%;
}
#node-matter-edit-form #edit-custom-fields-wrapper input[type='number'] {
  width: 100%;
}
#node-matter-edit-form #edit-field-open-date-wrapper {
  width: 100%;
}

#unasasma-assign-matter-org-custom-fields {
  margin-top: 10px;
}

#new-custom-field-form .ocmf-select-boolean input {
  height: unset;
  margin: 10px 0px 10px 10px;
}
.org-custom-boolean legend {
  float: left;
  background-color: #f0f1f4;
}
.org-custom-boolean .fieldset-legend {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #838996;
  display: inline-block;
  margin: 6px 10px 0;
}
.org-custom-boolean .fieldset-wrapper {
  clear: both;
  padding-left: 0;
}
.org-custom-boolean .fieldset-wrapper > div {
  display: flex;
}
.org-custom-boolean .fieldset-wrapper div.form-item {
  margin: 0;
  margin-left: 20px;
}

.org-custom-boolea-cc .select-wrapper {
  display: flex;
  background-color: #f0f1f4;
  border-bottom: 2px solid #9ba3b2;
  padding-bottom: 7px;
}
.org-custom-boolea-cc .select-wrapper div.form-item {
  margin: 0;
  margin-right: 15px;
  margin-left: 20px;
}
.org-custom-boolea-cc .select-wrapper label {
  padding: 0;
  margin: 0;
  margin-left: 10px;
}
#unasasma-assign-form .org-custom-boolea-cc > label {
  padding-bottom: 7px;
}
.org-custom-boolean .fieldset-wrapper .description {
  color: #737373;
}
.org-custom-boolean .fieldset-wrapper > div:first-child {
  background-color: #f0f1f4;
  border-bottom: 2px solid #9ba3b2;
  padding-bottom: 10px;
  margin-bottom: 3px;
}

#unasasma-assign-matter-org-custom-fields .form-type-date input {
  width: 100%;
}
#unasasma-assign-matter-org-custom-fields .form-type-number input {
  width: 100%;
}
#new-custom-field-form .ocmf-tag-input {
  font-size: 14px;
  margin: 0;
  height: auto;
  width: 120px;
  margin-left: 10px;
}
#new-custom-field-form .ocmf-create-tag-row a {
  border: 1px solid #12ba63;
  padding: 2px 7px;
  border-radius: 3px;
}
#new-custom-field-form a.ocmf-create-tag {
  display: none;
}
#new-custom-field-form .ocmf-create-tag-row .ocmf-tag-close {
  color: red;
  border-color: red;
}
#new-custom-field-form .ocmf-create-tag-row a:hover {
  background-color: #12ba63;
  color: #fff;
}
#new-custom-field-form .ocmf-create-tag-row .ocmf-tag-close:hover {
  background-color: red;
  color: #fff;
}
.ocmf-create-tags {
  margin-bottom: 20px;
}
.ocmf-create-tag-row > span {
  line-height: 2;
}

.ocmf-create-tag-row > img {
  width: 10px;
  height: 10px;
  position: relative;
  top: -3px;
}
#new-custom-field-form .ocmf-create-tag-row .ocmf-delete-tag {
  color: red;
  border-color: red;
  display: none;
}
#new-custom-field-form .ocmf-create-tag-row .ocmf-delete-tag:hover {
  background-color: red;
  color: #fff;
}

/* -------------------------------------------------------------------------
 * CF Filter Builder
 * ---------------------------------------------------------------------- */

/*
 * v2-design-system.css uses:
 *   :is(.path-matters-list,.path-matters) .views-exposed-form
 *   .matter-custom-fields-filters { ... !important }
 * That resolves to specificity 0-3-0 with !important.
 * A 4-class compound selector (0-4-0) wins in the !important layer regardless
 * of cascade order, because specificity 0-4-0 > 0-3-0.
 */
/* stylelint-disable selector-max-class */
.matter-custom-fields-filters.form-group.js-form-wrapper.form-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px !important;
  text-align: left;
  border: 1px solid #d1d3d8 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
}
/* stylelint-enable selector-max-class */

.matter-custom-fields-filters .form-item {
  width: 100%;
  margin-bottom: 0;
  text-align: left;
}

.matter-custom-fields-filters .cf-add-filter {
  width: 100%;
}

/* Chosen.js renders the Add-filter picker as a div with class
 * `chosen-container cf-add-filter` and inline `style="width:auto"`. The
 * natural width (~140px) is too narrow for the option list, so widen the
 * wrapper roughly 4x. min-width is enough — chosen's inline width:auto means
 * the element sizes to content, and min-width raises that floor. */
.matter-custom-fields-filters .cf-add-filter.chosen-container {
  min-width: 560px;
}

.cf-selected-filters-label {
  display: none;
  align-self: flex-start;
  margin-top: 10px;
  margin-bottom: 4px;
  text-align: left;
  color: #838996;
  font-size: 12px;
  font-weight: 600;
}

/*
 * The theme overrides display:flex with display:block and pins width to 0 via
 * .form-group / .form-wrapper rules — !important beats the cascade order.
 */
.matter-custom-fields-filters .cf-filter-rows {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Outer row: flex wrapper so the × button sits outside the white box. */
.cf-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* White box: sized to its content (label + op selector + value input). */
.cf-filter-row-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d1d3d8;
  border-radius: 8px;
  background-color: #ffffff;
}

.cf-row-label {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

/* Target only the native <select> elements — Chosen copies classes to its
 * container <div>, so an unqualified class selector would apply these sizing
 * styles to both the hidden select and the Chosen wrapper. */
select.cf-add-filter,
select.cf-op-select {
  height: 28px;
  padding: 2px 4px;
  font-size: 13px;
}

.cf-value-input {
  height: 28px;
  min-width: 120px;
  padding: 2px 4px;
  font-size: 13px;
}

/* <input> elements don't centre their text natively the way <select> does.
 * Force symmetric padding (the theme may override it to an asymmetric value)
 * and set line-height to fill the resulting content box so the text sits
 * vertically centred, matching the adjacent operator <select>. */
/* stylelint-disable declaration-no-important */
input.cf-value-input {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 24px;
}
/* stylelint-enable declaration-no-important */

.cf-remove-btn {
  cursor: pointer;
  padding: 0 2px;
  color: #c0392b;
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
}

.cf-remove-btn:hover {
  color: #922b21;
}

/* Incomplete row: value not yet chosen — highlighted on form submit. */
.cf-filter-row--incomplete .cf-filter-row-inner {
  border-color: #e67e22;
}

/* -------------------------------------------------------------------------
 * Advanced Search collapsible panel — visible state.
 *
 * The Advanced Search toggle anchor itself (and its hover / active styles)
 * lives in the theme's v2-design-system.css because it is positioned in the
 * matters view-header alongside other v2 page chrome.
 *
 * No !important on the visible state so jQuery .toggle() / .show() / .hide()
 * can flip the inline display style at runtime.
 * ---------------------------------------------------------------------- */
.matter-custom-fields-filters .advanced-search-content {
  display: block;
  width: 100%;
}

/* -------------------------------------------------------------------------
 * End CF Filter Builder
 * ---------------------------------------------------------------------- */

.vakata-context {
  z-index: 999999 !important;
}

.vakata-contextmenu {
  z-index: 999999;
}
#jstree-marker {
  z-index: 999999;
}
.jstree_tags_form .jstree_values {
  display: none;
}
.jstree_tags_form {
  background-color: #f0f1f4;
}
#unasasma-org-custom-fields-encoded {
  display: none;
}
.unasasma-assign-error {
  margin-top: 10px;
}
.unasasma-assign-error {
  display: none;
}

.options-adder {
  margin-bottom: 20px;
  display: block;
}

.sortable-option-rows-wrapper .option-row {
  display: flex;
}
.sortable-option-rows-wrapper .option-row a img {
  margin-top: 15px;
}
.sortable-option-rows-wrapper .option-row i {
  margin-top: 12px;
}
.ocmf-conditional-wrapper {
  display: flex;
}
.ocmf-conditional-label {
  margin-top: 10px;
}
#new-custom-field-form .ocmf-conditional-wrapper select {
  margin: 0;
  height: 32px;
}
#cfield-description textarea {
  width: 100%;
}
.ocmf-select-boolean {
  margin-bottom: 10px;
}
.org-custom-boolean {
  margin-bottom: 10px;
}
.cf-cf-filename {
  padding: 6px 10px;
  background-color: #f0f1f4;
  border-bottom: 2px solid #9ba3b2;
}
#edit-custom-fields-wrapper .form-type-managed-file span.file-size {
  margin-right: 6px;
}
#edit-custom-fields-wrapper .form-managed-file {
  background-color: #f0f1f4;
  padding: 5px;
  border-bottom: 2px solid #9ba3b2;
}
form.node-matter-edit-form #edit-custom-fields-wrapper {
  padding: 0 50px;
  border-left: 1px solid #dee0e3;
  border-right: 1px solid #dee0e3;
  border-bottom: none;
  margin-bottom: 0;
  border-radius: initial;
}
.jstree_tags_label_short {
  background-color: #f0f1f4;
  padding: 8px 10px;
}