:root {
  /* ===[BOOTSTRAP]=== */
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;

  --bs-light: #f8f9fa;
  --bs-secondary: #6c757d;
  --bs-dark: #212529;

  /* ===[FLUTTER]=== */
  --ft-red: #f44336;
  --ft-orange: #ff9800;
  --ft-yellow: #ffeb3b;
  --ft-green: #4caf50;
  --ft-blue: #2196f3;
  --ft-purple: #9c27b0;

  --ft-light-red: #ff8a80;
  --ft-light-orange: #ffcc80;
  --ft-light-yellow: #fff59d;
  --ft-light-green: #a5d6a7;
  --ft-light-blue: #81d4fa;
  --ft-light-purple: #ea80fc;

  --ft-dark-red: #b71c1c;
  --ft-dark-orange: #e65100;
  --ft-dark-yellow: #f57f17;
  --ft-dark-green: #1b5e20;
  --ft-dark-blue: #0d47a1;
  --ft-dark-purple: #6a1b9a;
}

/* BACKGROUND COLORS */
.bg-yellow {
  background-color: var(--ft-yellow) !important;
}

.bg-darkblue {
  background-color: var(--ft-dark-blue) !important;
}

.bg-darkgreen {
  background-color: var(--ft-dark-green) !important;
}

.bg-darkred {
  background-color: var(--ft-dark-red) !important;
}

/* FOREGROUND COLORS */
.fg-yellow {
  color: var(--ft-yellow) !important;
}

.fg-darkblue {
  color: var(--ft-dark-blue) !important;
}

.fg-darkgreen {
  color: var(--ft-dark-green) !important;
}

.fg-darkred {
  color: var(--ft-dark-red) !important;
}

.fg-green {
  color: var(--ft-green) !important;
}

/* NAV TABS */
button .nav-link {
  border: none;
}

button s.nav-link.active {
  border: none;
  background-color: var(--ft-dark-blue);
  color: var(--bs-light);
  margin-bottom: -1px;
  padding-bottom: -1px;
  border-bottom: 1px solid transparent;
}

/* OTHERS */
.asterisk {
  color: var(--bs-red);
}