/* ===================================================================
   LIA EMS -- utilities.css
   Flexbox helpers, Spacing, Typography, Info/Warn boxes
   =================================================================== */

/* -- FLEXBOX UTILITIES -- */
.flex {
  display: flex;
}

.fc {
  align-items: center;
}

.jb {
  justify-content: space-between;
}

.wrap {
  flex-wrap: wrap;
}

/* -- GAP UTILITIES -- */
.gap4 {
  gap: 4px;
}

.gap5 {
  gap: 5px;
}

.gap6 {
  gap: 6px;
}

.gap8 {
  gap: 8px;
}

.gap10 {
  gap: 10px;
}

/* -- MARGIN UTILITIES -- */
.ml {
  margin-left: auto;
}

.mt6 {
  margin-top: 6px;
}

.mt8 {
  margin-top: 8px;
}

.mt10 {
  margin-top: 10px;
}

.mt12 {
  margin-top: 12px;
}

.mb6 {
  margin-bottom: 6px;
}

.mb8 {
  margin-bottom: 8px;
}

.mb10 {
  margin-bottom: 10px;
}

/* -- TYPOGRAPHY UTILITIES -- */
.mono {
  font-family: var(--mono);
}

.fw7 {
  font-weight: 700;
}

.tx-blue {
  color: var(--blue2);
  cursor: pointer;
  transition: color .12s;
}

.tx-blue:hover {
  color: var(--blue-dk);
  text-decoration: underline;
}

.tx-sm {
  font-size: 11px;
}

.tx-xs {
  font-size: 10px;
}

.tx-muted {
  color: var(--tx4);
}

/* -- DIVIDER -- */
.divider {
  height: 1px;
  background: var(--bd);
  margin: 10px 0;
}

/* -- INFO & WARN BOXES -- */
.info-box {
  background: var(--blue-lt);
  border: 1px solid #bfdbfe;
  border-radius: var(--r);
  padding: 8px 11px;
  font-size: 11px;
  color: var(--navy);
  margin-bottom: 8px;
}

.warn-box {
  background: var(--amber-p);
  border: 1px solid #fcd34d;
  border-radius: var(--r);
  padding: 8px 11px;
  font-size: 11px;
  color: #78350f;
  margin-bottom: 8px;
}

/* -- MONO HELPERS -- */
.rn {
  color: var(--tx4);
  font-size: 10.5px;
  font-family: var(--mono);
}

.mn {
  font-family: var(--mono);
}