/* variants */
.success {
  background-color: var(--color-lima) !important;
  border-color: var(--color-canvas) !important;
}
.success th,
.success td {
  background-color: var(--color-lima) !important;
  border-color: var(--color-canvas) !important;
}
.success th,
.success tfoot td {
  color: var(--color-canvas) !important;
}

.success a:link,
.success a:visited {
  color: var(--color-canvas) !important;
}

.success a:hover,
.success a:active {
  color: var(--color-white) !important;
}

.border-success {
  border-color: var(--color-canvas) !important;
}
.bg-success {
  background-color: var(--color-lima) !important;
}
.text-success {
  color: var(--color-canvas) !important;
}
a.success {
  color: var(--color-canvas) !important;
}
:not([disabled]).btn-success {
  background-color: var(--color-canvas);
}
:not([disabled]).btn-success:hover,
:not([disabled]).btn-success:active {
  background-color: var(--color-lima);
}
:not([disabled]).btn-outline.btn-success {
  background-color: white;
  border-color: var(--color-canvas);
  color: var(--color-canvas);
}
:not([disabled]).btn-clear.btn-success {
  background-color: white;
  color: var(--color-canvas);
}
.danger {
  background-color: var(--color-rosey) !important;
  border-color: var(--color-cardinal) !important;
}
.danger th,
.danger td {
  background-color: var(--color-rosey) !important;
  border-color: var(--color-cardinal) !important;
}
.danger th,
.danger tfoot td {
  color: var(--color-cardinal) !important;
}

.danger a:link,
.danger a:visited {
  color: var(--color-maple) !important;
}

.danger a:hover,
.danger a:active {
  color: var(--color-cardinal) !important;
}

.border-danger {
  border-color: var(--color-cardinal) !important;
}
.bg-danger {
  background-color: var(--color-rosey) !important;
}
.text-danger {
  color: var(--color-cardinal) !important;
}
a.danger {
  color: var(--color-cardinal) !important;
}
:not([disabled]).btn-danger {
  background-color: var(--color-cardinal);
}
:not([disabled]).btn-danger:hover,
:not([disabled]).btn-danger:active {
  background-color: var(--color-rosey);
}
:not([disabled]).btn-outline.btn-danger {
  background-color: white;
  border-color: var(--color-cardinal);
  color: var(--color-cardinal);
}
:not([disabled]).btn-clear.btn-danger {
  background-color: white;
  color: var(--color-cardinal);
}
.warning {
  background-color: var(--color-manilla) !important;
  border-color: var(--color-sunshine) !important;
}
.warning th,
.warning td {
  background-color: var(--color-manilla) !important;
  border-color: var(--color-sunshine) !important;
}
.warning th,
.warning tfoot td {
  color: var(--color-sunshine) !important;
}

.warning a:link,
.warning a:visited {
  color: var(--color-charcoal) !important;
}

.warning a:hover,
.warning a:active {
  color: var(--color-mustard) !important;
}

.border-warning {
  border-color: var(--color-sunshine) !important;
}
.bg-warning {
  background-color: var(--color-manilla) !important;
}
.text-warning {
  color: var(--color-sunshine) !important;
}
a.warning {
  color: var(--color-sunshine) !important;
}
:not([disabled]).btn-warning {
  background-color: var(--color-sunshine);
}
:not([disabled]).btn-warning:hover,
:not([disabled]).btn-warning:active {
  background-color: var(--color-manilla);
}
:not([disabled]).btn-outline.btn-warning {
  background-color: white;
  border-color: var(--color-sunshine);
  color: var(--color-sunshine);
}
:not([disabled]).btn-clear.btn-warning {
  background-color: white;
  color: var(--color-sunshine);
}
.info {
  background-color: var(--color-skyline) !important;
  border-color: var(--color-cobalt) !important;
}
.info th,
.info td {
  background-color: var(--color-skyline) !important;
  border-color: var(--color-cobalt) !important;
}
.info th,
.info tfoot td {
  color: var(--color-cobalt) !important;
}

.info a:link,
.info a:visited {
  color: var(--color-ocean) !important;
}

.info a:hover,
.info a:active {
  color: var(--color-cobalt) !important;
}

.border-info {
  border-color: var(--color-cobalt) !important;
}
.bg-info {
  background-color: var(--color-skyline) !important;
}
.text-info {
  color: var(--color-cobalt) !important;
}
a.info {
  color: var(--color-cobalt) !important;
}
:not([disabled]).btn-info {
  background-color: var(--color-cobalt);
}
:not([disabled]).btn-info:hover,
:not([disabled]).btn-info:active {
  background-color: var(--color-skyline);
}
:not([disabled]).btn-outline.btn-info {
  background-color: white;
  border-color: var(--color-cobalt);
  color: var(--color-cobalt);
}
:not([disabled]).btn-clear.btn-info {
  background-color: white;
  color: var(--color-cobalt);
}
.success-alt {
  background-color: var(--color-canvas) !important;
  border-color: var(--color-lima) !important;

  color: var(--color-white);
}
.success-alt th,
.success-alt td {
  background-color: var(--color-canvas) !important;
  border-color: var(--color-lima) !important;
}
.success-alt th,
.success-alt tfoot td {
  color: var(--color-lima) !important;
}

.success-alt a:link,
.success-alt a:visited {
  color: var(--color-white) !important;
}

.success-alt a:hover,
.success-alt a:active {
  color: var(--color-lima) !important;
}

.border-success-alt {
  border-color: var(--color-lima) !important;
}
.bg-success-alt {
  background-color: var(--color-canvas) !important;
}
.text-success-alt {
  color: var(--color-lima) !important;
}
a.success-alt {
  color: var(--color-lima) !important;
}
:not([disabled]).btn-success-alt {
  background-color: var(--color-lima);
}
:not([disabled]).btn-success-alt:hover,
:not([disabled]).btn-success-alt:active {
  background-color: var(--color-canvas);
}
:not([disabled]).btn-outline.btn-success-alt {
  background-color: white;
  border-color: var(--color-lima);
  color: var(--color-lima);
}
:not([disabled]).btn-clear.btn-success-alt {
  background-color: white;
  color: var(--color-lima);
}
.danger-alt {
  background-color: var(--color-cardinal) !important;
  border-color: var(--color-rosey) !important;

  color: var(--color-white);
}
.danger-alt th,
.danger-alt td {
  background-color: var(--color-cardinal) !important;
  border-color: var(--color-rosey) !important;
}
.danger-alt th,
.danger-alt tfoot td {
  color: var(--color-rosey) !important;
}

.danger-alt a:link,
.danger-alt a:visited {
  color: var(--color-white) !important;
}

.danger-alt a:hover,
.danger-alt a:active {
  color: var(--color-rosey) !important;
}

.border-danger-alt {
  border-color: var(--color-rosey) !important;
}
.bg-danger-alt {
  background-color: var(--color-cardinal) !important;
}
.text-danger-alt {
  color: var(--color-rosey) !important;
}
a.danger-alt {
  color: var(--color-rosey) !important;
}
:not([disabled]).btn-danger-alt {
  background-color: var(--color-rosey);
}
:not([disabled]).btn-danger-alt:hover,
:not([disabled]).btn-danger-alt:active {
  background-color: var(--color-cardinal);
}
:not([disabled]).btn-outline.btn-danger-alt {
  background-color: white;
  border-color: var(--color-rosey);
  color: var(--color-rosey);
}
:not([disabled]).btn-clear.btn-danger-alt {
  background-color: white;
  color: var(--color-rosey);
}
.warning-alt {
  background-color: var(--color-sunshine) !important;
  border-color: var(--color-manilla) !important;

  color: var(--color-white);
}
.warning-alt th,
.warning-alt td {
  background-color: var(--color-sunshine) !important;
  border-color: var(--color-manilla) !important;
}
.warning-alt th,
.warning-alt tfoot td {
  color: var(--color-manilla) !important;
}

.warning-alt a:link,
.warning-alt a:visited {
  color: var(--color-charcoal) !important;
}

.warning-alt a:hover,
.warning-alt a:active {
  color: var(--color-mustard) !important;
}

.border-warning-alt {
  border-color: var(--color-manilla) !important;
}
.bg-warning-alt {
  background-color: var(--color-sunshine) !important;
}
.text-warning-alt {
  color: var(--color-manilla) !important;
}
a.warning-alt {
  color: var(--color-manilla) !important;
}
:not([disabled]).btn-warning-alt {
  background-color: var(--color-manilla);
}
:not([disabled]).btn-warning-alt:hover,
:not([disabled]).btn-warning-alt:active {
  background-color: var(--color-sunshine);
}
:not([disabled]).btn-outline.btn-warning-alt {
  background-color: white;
  border-color: var(--color-manilla);
  color: var(--color-manilla);
}
:not([disabled]).btn-clear.btn-warning-alt {
  background-color: white;
  color: var(--color-manilla);
}
.info-alt {
  background-color: var(--color-cobalt) !important;
  border-color: var(--color-skyline) !important;

  color: var(--color-white);
}
.info-alt th,
.info-alt td {
  background-color: var(--color-cobalt) !important;
  border-color: var(--color-skyline) !important;
}
.info-alt th,
.info-alt tfoot td {
  color: var(--color-skyline) !important;
}

.info-alt a:link,
.info-alt a:visited {
  color: var(--color-white) !important;
}

.info-alt a:hover,
.info-alt a:active {
  color: var(--color-skyline) !important;
}

.border-info-alt {
  border-color: var(--color-skyline) !important;
}
.bg-info-alt {
  background-color: var(--color-cobalt) !important;
}
.text-info-alt {
  color: var(--color-skyline) !important;
}
a.info-alt {
  color: var(--color-skyline) !important;
}
:not([disabled]).btn-info-alt {
  background-color: var(--color-skyline);
}
:not([disabled]).btn-info-alt:hover,
:not([disabled]).btn-info-alt:active {
  background-color: var(--color-cobalt);
}
:not([disabled]).btn-outline.btn-info-alt {
  background-color: white;
  border-color: var(--color-skyline);
  color: var(--color-skyline);
}
:not([disabled]).btn-clear.btn-info-alt {
  background-color: white;
  color: var(--color-skyline);
}
.contrast {
  background-color: var(--color-white) !important;
  border-color: var(--color-charcoal) !important;
}
.contrast th,
.contrast td {
  background-color: var(--color-white) !important;
  border-color: var(--color-charcoal) !important;
}
.contrast th,
.contrast tfoot td {
  color: var(--color-charcoal) !important;
}

.contrast a:hover,
.contrast a:active {
  color: var(--color-royal) !important;
}

.border-contrast {
  border-color: var(--color-charcoal) !important;
}
.bg-contrast {
  background-color: var(--color-white) !important;
}
.text-contrast {
  color: var(--color-charcoal) !important;
}
a.contrast {
  color: var(--color-charcoal) !important;
}
:not([disabled]).btn-contrast {
  background-color: var(--color-charcoal);
}
:not([disabled]).btn-contrast:hover,
:not([disabled]).btn-contrast:active {
  background-color: var(--color-white);
}
:not([disabled]).btn-outline.btn-contrast {
  background-color: white;
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}
:not([disabled]).btn-clear.btn-contrast {
  background-color: white;
  color: var(--color-charcoal);
}
.grayscale {
  background-color: var(--color-cloud) !important;
  border-color: var(--color-aluminum) !important;
}
.grayscale th,
.grayscale td {
  background-color: var(--color-cloud) !important;
  border-color: var(--color-aluminum) !important;
}
.grayscale th,
.grayscale tfoot td {
  color: var(--color-aluminum) !important;
}

.grayscale a:hover,
.grayscale a:active {
  color: var(--color-royal) !important;
}

.border-grayscale {
  border-color: var(--color-aluminum) !important;
}
.bg-grayscale {
  background-color: var(--color-cloud) !important;
}
.text-grayscale {
  color: var(--color-aluminum) !important;
}
a.grayscale {
  color: var(--color-aluminum) !important;
}
:not([disabled]).btn-grayscale {
  background-color: var(--color-aluminum);
}
:not([disabled]).btn-grayscale:hover,
:not([disabled]).btn-grayscale:active {
  background-color: var(--color-cloud);
}
:not([disabled]).btn-outline.btn-grayscale {
  background-color: white;
  border-color: var(--color-aluminum);
  color: var(--color-aluminum);
}
:not([disabled]).btn-clear.btn-grayscale {
  background-color: white;
  color: var(--color-aluminum);
}
.midnite {
  background-color: var(--color-charcoal) !important;
  border-color: var(--color-slate) !important;

  color: var(--color-white);
}
.midnite th,
.midnite td {
  background-color: var(--color-charcoal) !important;
  border-color: var(--color-slate) !important;
}
.midnite th,
.midnite tfoot td {
  color: var(--color-slate) !important;
}

.midnite a:link,
.midnite a:visited {
  color: var(--color-white) !important;
}

.midnite a:hover,
.midnite a:active {
  color: var(--color-aluminum) !important;
}

.border-midnite {
  border-color: var(--color-slate) !important;
}
.bg-midnite {
  background-color: var(--color-charcoal) !important;
}
.text-midnite {
  color: var(--color-slate) !important;
}
a.midnite {
  color: var(--color-slate) !important;
}
:not([disabled]).btn-midnite {
  background-color: var(--color-slate);
}
:not([disabled]).btn-midnite:hover,
:not([disabled]).btn-midnite:active {
  background-color: var(--color-charcoal);
}
:not([disabled]).btn-outline.btn-midnite {
  background-color: white;
  border-color: var(--color-slate);
  color: var(--color-slate);
}
:not([disabled]).btn-clear.btn-midnite {
  background-color: white;
  color: var(--color-slate);
}