:root {
  --blueberry: #26304e;
  --primary: #2076bc;
  --primary-o: #1d6cac;
  --secondary: #e36414;
  --secondary-o: #c95a15;

  --green: #77C19D;
  --red: #D31030;

  --purple: #A4166c;

  --citrine: #dacc3e;

  --orange: #F6B31A;
  --teal: #007188;

  --font-josefin: "josefin-sans", sans-serif;
  --font-p22: "p22-underground", sans-serif;
}

body {
  font-family: system-ui, sans-serif;
  /* font-family: var(--font-body); */
  font-weight: normal;
}

.navbar {
  background: var(--blueberry);
}

.activity-card {
  padding-block: 2rem 1.5rem;
  height: auto;
  min-height: 14rem;
}

.activity-icon {
  margin-top: 0;
}

.activity-title {
  color: var(--blueberry);
  min-height: 3.5rem;
  margin-block: 1rem 1.5rem;
  line-height: 1.25;
}

.activity-link {
  line-height: 1;
}

.activity-color {
  color: var(--secondary);
}

.btn-sm {
  padding-inline: 1rem;
}

.quick-ad-icon {
  color: #fff;
}

.navbar-clip-count:hover,
.navbar-logout:hover,
.quick-ad-icon:hover {
  color: rgba(255, 255, 255, 0.7)
}

.newad .fa {
  font-size: 1.375rem;
}

.navbar-brand {
  padding: 0;
  margin-top: 0.625rem;
}

.data-table th {
  border: 2px solid var(--primary);
  font-size: 0.8125rem;
  font-weight: 400;
}

.table th {
  background: var(--primary);
}

.btn-danger {
  background-color: var(--red);
  border-color: var(--red);
}

.status-expired {
  background: var(--red);
}

.red {
  color: var(--red);
}

.green {
  color: var(--green);
}

.nav-link {
  font-family: var(--font-josefin);
}

h1,
h2,
h3 {
  font-family: var(--font-p22);
}

.header-title {
  color: var(--blueberry);
  font-family: var(--font-josefin);
  font-weight: 600;
  font-size: 1.75rem;
}

.settings-tile {
  color: var(--blueberry) !important;
}

.settings-tile:hover {
  color: var(--blueberry) !important;
}

.stats-mini-table .table th {
  background: #f5f6fa;
  color: #b8b8b8;
  font-size: 0.6rem;
  padding: 0.2rem;
}

.data {
  padding: 1.5rem 1.5rem 1px;
}

.activity-icon.pink {
  color: var(--citrine);
}

.activity-icon.secondary-o {
  color: var(--orange);
}

.fa-atr.primary {
  color: var(--teal);
}