.field-requirement-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 18px;
  margin-left: 7px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
}

.field-requirement-badge.is-required {
  border-color: rgba(171, 71, 55, .28);
  background: rgba(171, 71, 55, .11);
  color: #9b3427;
}

.field-requirement-badge.is-optional {
  border-color: rgba(73, 105, 88, .22);
  background: rgba(73, 105, 88, .08);
  color: #617066;
}

.field-requirement-badge.is-conditional {
  border-color: rgba(174, 116, 31, .3);
  background: rgba(196, 139, 55, .12);
  color: #976312;
}

body.dark-mode .field-requirement-badge.is-required,
.admin-shell .field-requirement-badge.is-required,
.login-shell .field-requirement-badge.is-required {
  border-color: rgba(238, 142, 124, .35);
  background: rgba(177, 75, 60, .18);
  color: #f1a18f;
}

body.dark-mode .field-requirement-badge.is-optional,
.admin-shell .field-requirement-badge.is-optional,
.login-shell .field-requirement-badge.is-optional {
  border-color: rgba(157, 178, 165, .25);
  background: rgba(131, 157, 141, .12);
  color: #b3c3b8;
}

body.dark-mode .field-requirement-badge.is-conditional,
.admin-shell .field-requirement-badge.is-conditional,
.login-shell .field-requirement-badge.is-conditional {
  border-color: rgba(226, 179, 103, .34);
  background: rgba(196, 139, 55, .17);
  color: #e7bd78;
}

@media (max-width: 640px) {
  .field-requirement-badge {
    min-height: 17px;
    margin-left: 5px;
    padding: 2px 5px;
    font-size: 10px;
  }
}