.ui.form {
  margin-bottom: 3rem;
}
.ui.form#public-registration-form {
  margin-bottom: 5rem;
}
.ui.form .dropdown-field .other-value-field,
.ui.form .radio-field .other-value-field,
.ui.form .multiple-checkbox-field .other-value-field,
.ui.form .ranking-field .other-value-field {
  display: none;
}
.ui.form .dropdown-field.others .other-value-field,
.ui.form .radio-field.others .other-value-field,
.ui.form .multiple-checkbox-field.others .other-value-field,
.ui.form .ranking-field.others .other-value-field {
  display: block;
}
.ui.form .grouped.fields .field {
  margin: 0.05em 0 !important;
}
.ui.form .quill-block {
  margin: 0 0 1rem;
  padding: 0;
}
.ui.form .ql-editor ul,
.ui.form .ql-editor ol {
  padding-left: 2rem;
}
.ui.form .ql-editor li {
  padding: 0 0 0 0.5rem;
}
.ui.form .ql-editor ol li {
  list-style-type: decimal;
}
.ui.form .ql-editor ul li {
  list-style-type: disc;
}
.ui.form .ql-editor div:empty {
  display: block;
  height: 1em;
  content: "";
}
.ui.form .consent-component {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.ui.form .ranking-field {
  /* "Others" is optional - never highlight it red due to the generic ranking error.
       Red is re-applied only when the "Others" row itself has the error class (empty Others value). */
}
.ui.form .ranking-field .ranking-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.ui.form .ranking-field .ranking-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ui.form .ranking-field .ranking-item .ranking-rank-wrapper {
  flex-shrink: 0;
}
.ui.form .ranking-field .ranking-item .ranking-rank-wrapper .ui.ranking-rank.dropdown {
  min-width: unset;
  padding: 0.5rem 1.75rem 0.5rem 0.75rem;
  font-size: 0.875rem;
}
.ui.form .ranking-field .ranking-item .ranking-rank-wrapper .ui.ranking-rank.dropdown .menu .item.disabled {
  display: none !important;
}
.ui.form .ranking-field .ranking-item .ranking-option {
  flex: 1;
}
.ui.form .ranking-field.error .ranking-others-item:not(.error) .ui.dropdown,
.ui.form .ranking-field.error .other-value-field:not(.error) .ui.dropdown,
.ui.form .ranking-field.error .ranking-others-item:not(.error) .ui.dropdown > .text,
.ui.form .ranking-field.error .other-value-field:not(.error) .ui.dropdown > .text,
.ui.form .ranking-field.error .ranking-others-item:not(.error) .ui.dropdown .item,
.ui.form .ranking-field.error .other-value-field:not(.error) .ui.dropdown .item {
  background: #fff !important;
  color: rgba(0, 0, 0, 0.87) !important;
}
.ui.form .ranking-field.error .ranking-others-item:not(.error) .ui.dropdown,
.ui.form .ranking-field.error .other-value-field:not(.error) .ui.dropdown {
  border-color: rgba(34, 36, 38, 0.15) !important;
  box-shadow: none !important;
}
.ui.form .ranking-field.error .ranking-others-item:not(.error) input,
.ui.form .ranking-field.error .other-value-field:not(.error) input {
  background: #fff !important;
  color: rgba(0, 0, 0, 0.87) !important;
  border-color: rgba(34, 36, 38, 0.15) !important;
  box-shadow: none !important;
}
.ui.form > .section {
  margin-bottom: 1em;
}
/* Override Fomantic UI style that shows error msg on load for required file field */
.ui.file.input input[type=file]:required:invalid,
.ui.form .field input[type=file]:required:invalid {
  color: inherit;
  background: inherit;
  border-color: rgba(34, 36, 38, 0.15);
}
.field.error > .dropzone-component {
  border-color: #9f3a38;
  color: #9f3a38;
}
.field.error > .dropzone-component .drop-files-message {
  color: #9f3a38 !important;
}