: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;

  /* ===[CBSI]=== */
  --cbsi-darkblue: #203864;
  --cbsi-lightblue: #049cfc;
  --cbsi-orange: #fc6405;
}

/* 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;
}

.bg-cbsi-darkblue {
  background-color: var(--cbsi-darkblue) !important;
}

.bg-cbsi-lightblue {
  background-color: var(--cbsi-lightblue) !important;
}

.bg-cbsi-orange {
  background-color: var(--cbsi-orange) !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-cbsi-darkblue {
  color: var(--cbsi-darkblue) !important;
}

.fg-cbsi-lightblue {
  color: var(--cbsi-lightblue) !important;
}

.fg-cbsi-orange {
  color: var(--cbsi-orange) !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;
}

.nav-tabs {
  border: none;
}

.nav-tabs .nav-link {
  color: var(--bs-light) !important;
}

.nav-tabs .nav-link:hover {
  background-color: var(--bs-blue) !important;
  border: 1px solid var(--bs-blue) !important;
  color: var(--bs-light) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--bs-light) !important;
  border: 1px solid white !important;
  color: var(--ft-dark-blue) !important;
}

/* SWITCH */
.form-switch .form-check-input {
  background-color: var(--bs-red);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input::before {
  background-color: var(--bs-red);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  background-color: var(--bs-green);
}

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