.badge {
  white-space: nowrap;
  background-color: #fff;
  margin-right: .5rem;
  padding: .2rem .5rem;
  color: #777;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid #777;
}

.badge_important {
  color: #C53939;
  border: 1px solid #C53939;
}

.badge_success {
  color: #429992;
  border: 1px solid #429992;
}

.badge_status {
  font-size: 1.2rem;
  font-weight: 600;
  padding: .2rem .5rem;
  white-space: nowrap;
}

.badge_status_active {
  background-color: #C7F2E1;
  color: #00965C;
}

.badge_status_nonactive {
  background-color: #D7D7D7;
  color: #777;
}

.badge_status_decline {
  background-color: #F2C7C7;
  color: #960000;
}

.badge_status_notification {
  background-color: #C53939;
  color: #ffffff;
}

.badge_status_notification_number-only {
  border-radius: 10rem;
}

.badge_status_pending {
  background-color: #fffacd;
  color: #ff8c00;
}

.badge_status_important {
  background-color: #FFE5E5;
  color: #C53939;
}

.badge_status_caption {
  background-color: #777;
  color: #fff;
}

.badge_border_only {
  background-color: none;
  border: 1px solid #777;
  color: #777;
}

.badge_status_attendance-blank {
  background-color: #005BAC;
  color: #ffffff;
}

.badge_status_attendance-checked {
  background-color: #777777;
  color: #ffffff;
}

.table_form .badge_status_important {
  margin: 0 0 0 .5rem;
  padding-top: 1px;
}

/* 複数可のバッジで使用してます */
.table_form .badge_status_caption {
  margin: 0 0 0 .5rem;
  padding-top: 1px;
}

.mobile_form-area .badge {
  margin-left: .5rem;
}

.badge_border_none {
  border-style: none;
}

.notification-badge {
  background-color: #005BAC;
  border-radius: 50%;
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}