:root {
  --primary: #0D4A87;
  --secondary: #129674;
  --info: #2BBFDA;
  --warning: #FCAF17;
  --danger: #ED1C25;
}

/* Background utilities */
.bg-primary-custom {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}
.bg-secondary-custom {
  background-color: var(--secondary) !important;
  color: #ffffff !important;
}
.bg-info-custom {
  background-color: var(--info) !important;
  color: #ffffff !important;
}
.bg-warning-custom {
  background-color: var(--warning) !important;
  color: #000000 !important;
}
.bg-danger-custom {
  background-color: var(--danger) !important;
  color: #ffffff !important;
}

/* Text utilities */
.text-primary-custom {
  color: var(--primary) !important;
}
.text-secondary-custom {
  color: var(--secondary) !important;
}
.text-info-custom {
  color: var(--info) !important;
}
.text-warning-custom {
  color: var(--warning) !important;
}
.text-danger-custom {
  color: var(--danger) !important;
}

/* Button styles */
.btn-primary-custom {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}
.btn-primary-custom:hover,
.btn-primary-custom:focus {
  background-color: #0a3763 !important;
  border-color: #0a3763 !important;
  color: #ffffff !important;
}

.btn-secondary-custom {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #ffffff !important;
}
.btn-secondary-custom:hover,
.btn-secondary-custom:focus {
  background-color: #0f7258 !important;
  border-color: #0f7258 !important;
  color: #ffffff !important;
}

.btn-info-custom {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
  color: #ffffff !important;
}
.btn-info-custom:hover,
.btn-info-custom:focus {
  background-color: #2296ac !important;
  border-color: #2296ac !important;
  color: #ffffff !important;
}

.btn-warning-custom {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #000000 !important;
}
.btn-warning-custom:hover,
.btn-warning-custom:focus {
  background-color: #d99512 !important;
  border-color: #d99512 !important;
  color: #000000 !important;
}

.btn-danger-custom {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #ffffff !important;
}
.btn-danger-custom:hover,
.btn-danger-custom:focus {
  background-color: #b8161d !important;
  border-color: #b8161d !important;
  color: #ffffff !important;
}

/* Outline buttons */
.btn-outline-primary-custom {
  background-color: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.btn-outline-primary-custom:hover,
.btn-outline-primary-custom:focus {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

.btn-outline-secondary-custom {
  background-color: transparent !important;
  border-color: var(--secondary) !important;
  color: var(--secondary) !important;
}
.btn-outline-secondary-custom:hover,
.btn-outline-secondary-custom:focus {
  background-color: var(--secondary) !important;
  color: #ffffff !important;
}

.btn-outline-info-custom {
  background-color: transparent !important;
  border-color: var(--info) !important;
  color: var(--info) !important;
}
.btn-outline-info-custom:hover,
.btn-outline-info-custom:focus {
  background-color: var(--info) !important;
  color: #ffffff !important;
}

.btn-outline-warning-custom {
  background-color: transparent !important;
  border-color: var(--warning) !important;
  color: var(--warning) !important;
}
.btn-outline-warning-custom:hover,
.btn-outline-warning-custom:focus {
  background-color: var(--warning) !important;
  color: #000000 !important;
}

.btn-outline-danger-custom {
  background-color: transparent !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.btn-outline-danger-custom:hover,
.btn-outline-danger-custom:focus {
  background-color: var(--danger) !important;
  color: #ffffff !important;
}
