:root{
  --color-primary: #335c67;
  --color-secondary: #fff3b0;
  --color-success: #06d6a0;
  --color-warning: #e09f3e;
  --color-danger: #9e2a2b;
  --color-info: #3a86ff;
  --color-default: #540b0e;
}

.btn-primary{
  background-color: var(--color-primary);
  color: white;
}


.btn-secondary{
  background-color: var(--color-secondary);
  color: #1f2937;
}

.btn-success{
  background-color: var(--color-success);
  color: white;
}

.btn-warning{
  background-color: var(--color-warning);
  color: white;
}

.btn-danger, .bg-danger{
  background-color: var(--color-danger);
  color: white !important;
}

.btn-default{
  background-color: var(--color-default);
  color: white;
}

.btn-info{
  background-color: var(--color-info);
  color: white;
}




.btn-primary:hover{
  background-color: var(--color-primary);
  color: white;
}


.btn-secondary:hover{
  background-color: var(--color-secondary);
  color: #1f2937;
}

.btn-success:hover{
  background-color: var(--color-success);
  color: white;
}

.btn-warning:hover{
  background-color: var(--color-warning);
  color: white;
}

.btn-danger:hover{
  background-color: var(--color-danger);
  color: white;
}

.btn-default:hover{
  background-color: var(--color-default);
  color: white;
}

.btn-info:hover{
  background-color: var(--color-info);
  color: white;
}



.badge-danger{
  color: var(--color-danger);
}

.badge-success{
  color: var(--color-success);
}


.badge-info{
  color: var(--color-info);
}


.badge-warning{
  color: var(--color-warning);
}