:root {
  --primary-color: #1a4796 !important;
  --primary-color-rgb: 27, 73, 152;
  --default-alpha: 0.7;
  --primary-dark: #153978;
  --blue: #316fd3 !important;
  --blue-dark: #1851ab;
  --blue-light: #c4daf2;
  --red: #de5656 !important;
  --red-dark: #be3636;
  --red-light: #f5caca;
  --yellow: #f8a20e !important;
  --yellow-dark: #dd8c0a;
  --yellow-light: #fcdda9;
  --green: #36bf91 !important;
  --green-dark: #219c73;
  --green-light: #baebdb;
  --navy: #316fd3 !important;
  --navy-dark: #031930;
  --navy-light: #e9f1fc;

  --white: #fff;
  --gray-50: #fdfdfd;
  --gray-80: #f8f8f8;
  --gray-100: #f2f2f2;
  --gray-200: #e4e5e7;
  --gray-300: #c2c3c2;
  --gray-400: #a6a7a4;
  --gray-500: #8a8887;
  --gray-600: #6d6a6a;
  --gray-700: #504c50;
  --gray-800: #302f33;
  --gray-900: #121416;
  --divider-color: #e6e8f0;
  --secondary: #eff1f3;

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* BG COLOR START */

/* NORMAL START */
.bg-primary {
  background-color: var(--primary-color) !important;
}

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

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

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

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

.bg-silver {
  background-color: #b2bec3 !important;
}

.bg-brown {
  background-color: #964b00;
}

.bg-gray-50 {
  background-color: var(--gray-50) !important;
}

.bg-gray-100 {
  background-color: var(--gray-100) !important;
}

.bg-gray-200 {
  background-color: var(--gray-200) !important;
}

.bg-gray-300 {
  background-color: var(--gray-300) !important;
}

.bg-gray-400 {
  background-color: var(--gray-400) !important;
}

.bg-gray-500 {
  background-color: var(--gray-500) !important;
}

.bg-gray-600 {
  background-color: var(--gray-600) !important;
}

.bg-gray-700 {
  background-color: var(--gray-700) !important;
}

/* NORMAL END */

/* LIGHT START */
.bg-red-light {
  background-color: var(--red-light) !important;
}

.bg-yellow-light {
  background-color: var(--yellow-light) !important;
}

.bg-green-light {
  background-color: var(--green-light) !important;
}

.bg-blue-light {
  background-color: var(--blue-light) !important;
}

.bg-navy-light {
  background-color: var(--navy-light);
}

.bg-secondary-light {
  background-color: var(--gray-400) !important;
}

.bg-purple-light {
  background-color: var(--purple-light);
}

/* LIGHT END */

/* DARK START */
.bg-yellow-dark {
  background-color: var(--yellow-dark) !important;
}

.bg-navy-dark {
  background-color: var(--navy-dark) !important;
}

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

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

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

/* DARK END */

/* TEXT CLASSNAME START */
.text-primary-color {
  color: var(--primary-color) !important;
}

.text-red {
  color: var(--red) !important;
}

.text-blue {
  color: var(--blue) !important;
}

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

.text-yellow {
  color: var(--yellow) !important;
}

.text-blue-light {
  color: var(--blue-light) !important;
}

.text-navy-dark {
  color: var(--navy-dark);
}

.text-red-dark {
  color: var(--red-dark) !important;
}

.text-purple-dark {
  color: var(--purple-dark);
}

.text-black {
  color: var(--gray-800);
}

.text-secondary {
  color: var(--gray-400) !important;
}

.text-yellow-dark {
  color: var(--yellow-dark) !important;
}

.text-green-dark {
  color: var(--green-dark) !important;
}

.text-blue-dark {
  color: var(--blue-dark) !important;
}

.text-gray-50 {
  color: var(--gray-50) !important;
}

.text-gray-100 {
  color: var(--gray-100) !important;
}

.text-gray-200 {
  color: var(--gray-200) !important;
}

.text-gray-300 {
  color: var(--gray-300) !important;
}

.text-gray-400 {
  color: var(--gray-400) !important;
}

.text-gray-500 {
  color: var(--gray-500) !important;
}

.text-gray-600 {
  color: var(--gray-600) !important;
}

.text-gray-700 {
  color: var(--gray-700) !important;
}

.text-white {
  color: white;
}