/* ========== 01.00 - UI Components CSS ========== */

/* TAG PILLS */

.tag-pills{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:8px;
  margin-bottom:8px;
}

.tag-pill{
  background:#3a404d;
  color:#ddd;
  padding:1px 4px;
  border-radius:999px;
  font-size:11px;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
}

/* ========== 02.00 - Modal & Form Status, Validation, Success, Error etc. ========== */

#usernameStatus{
  min-height:20px;
  font-size:14px;
  margin-top:10px;
  margin-bottom:14px;
}

.validation-status{
  min-height:20px;
  font-size:14px;
  margin-top:10px;
  margin-bottom:14px;
}

#passwordStatus{
  min-height:20px;
  font-size:14px;
  margin-top:10px;
  margin-bottom:14px;
}

.validation-success{
  color:#65d46e;
}

.validation-error{
  color:#ff8f8f;
}

.validation-info{
  color:#aab4c0;
}


/* ========== 03.00 Notifications */

.notification-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d32f2f;
  color: white;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  display: none;
}

.button-with-badge {
  position: relative;
}