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

  /* ===[SJ]=== */
  /* --sj-red: #fe0c01;
  --sj-yellow: #ffa602;
  --sj-green: #4d6902; */

  --sj-grapefruit: #dc381f;
  --sj-gold-drop: #f18200;
  --sj-cantaloupe: #ffa62f;
  --sj-tacao: #edb381;
  --sj-green-pea: #1d6142;
  --sj-topaz: #05b4b2;
  --sj-dark-cyan: #008b8b;
  --sj-medium-persian-blue: #0067a5;
  --sj-dark-cerulean: #08457e;
  --sj-navy: #01153e;
  --sj-thunder: #33292f;
  --sj-persian-plum: #701c1c;
}

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

/* ==========[ BACKGROUND SJ ]========== */
.bg-sj-topaz {
  background-color: var(--sj-topaz) !important;
}
.bg-sj-medium-persian-blue,
.bg-sj-primary {
  background-color: var(--sj-medium-persian-blue) !important;
}
.bg-sj-green-pea,
.bg-sj-success {
  background-color: var(--sj-green-pea) !important;
}
.bg-sj-cantaloupe,
.bg-sj-warning {
  background-color: var(--sj-cantaloupe) !important;
}
.bg-sj-grapefruit,
.bg-sj-danger {
  background-color: var(--sj-grapefruit) !important;
}
.bg-sj-tacao {
  background-color: var(--sj-tacao) !important;
}
.bg-sj-navy {
  background-color: var(--sj-navy) !important;
}
.bg-sj-dark-cerulean {
  background-color: var(--sj-dark-cerulean) !important;
}
.bg-sj-persian-plum {
  background-color: var(--sj-persian-plum) !important;
}
.bg-sj-dark-cyan,
.bg-sj-info {
  background-color: var(--sj-dark-cyan) !important;
}
.bg-sj-gold-drop {
  background-color: var(--sj-gold-drop) !important;
}
.bg-sj-thunder,
.bg-sj-secondary {
  background-color: var(--sj-thunder) !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;
}

/* ==========[ FOREGROUND SJ ]========== */
.fg-sj-topaz {
  color: var(--sj-topaz) !important;
}
.fg-sj-medium-persian-blue,
.fg-sj-primary {
  color: var(--sj-medium-persian-blue) !important;
}
.fg-sj-success,
.fg-sj-success {
  color: var(--sj-green-pea) !important;
}
.fg-sj-cantaloupe,
.fg-sj-warning {
  color: var(--sj-cantaloupe) !important;
}
.fg-sj-grapefruit,
.fg-sj-danger {
  color: var(--sj-grapefruit) !important;
}
.fg-sj-tacao {
  color: var(--sj-tacao) !important;
}
.fg-sj-navy {
  color: var(--sj-navy) !important;
}
.fg-sj-dark-cerulean {
  color: var(--sj-dark-cerulean) !important;
}
.fg-sj-persian-plum {
  color: var(--sj-persian-plum) !important;
}
.fg-sj-persian-plum {
  color: var(--sj-persian-plum) !important;
}
.fg-sj-dark-cyan,
.fg-sj-info {
  color: var(--sj-dark-cyan) !important;
}
.fg-sj-gold-drop {
  color: var(--sj-gold-drop) !important;
}
.fg-sj-thunder,
.fg-sj-secondary {
  color: var(--sj-thunder) !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);
}

.border-sj-success {
  border: 2px solid var(--sj-green-pea) !important;
}

.border-sj-success-left {
  border-left: 7px solid var(--sj-green-pea);
  padding-left: 1rem;
  margin-left: -1rem;
}