* {
    --palette-midnight-blue: #2C3E50;
    --palette-gray-light-with-blue: #AEB8C2;
}

/* Background color classes */

.bg-color-black {
    background-color:  var(--mud-palette-black)!important;
}
.bg-color-white {
    background-color:  var(--mud-palette-white)!important;
}
.bg-color-gray {
    background-color:  var(--mud-palette-gray-default)!important;
}
.bg-color-gray-lighter {
    background-color:  var(--mud-palette-gray-lighter)!important;
}
.bg-color-gray-light {
    background-color:  var(--mud-palette-gray-light)!important;
}
.bg-color-gray-darker {
    background-color:  var(--mud-palette-gray-darker)!important;
}
.bg-color-gray-dark {
    background-color:  var(--mud-palette-gray-dark)!important;
}
.bg-color-primary {
    background-color:  var(--mud-palette-primary)!important;
}
.bg-color-primary-lighten {
    background-color:  var(--mud-palette-primary-lighten)!important;
}
.bg-color-primary-darken {
    background-color:  var(--mud-palette-primary-darken)!important;
}
.bg-color-primary-hover {
    background-color:  var(--mud-palette-primary-hover)!important;
}
.bg-color-secondary {
    background-color:  var(--mud-palette-secondary)!important;
}
.bg-color-secondary-lighten {
    background-color:  var(--mud-palette-secondary-lighten)!important;
}
.bg-color-secondary-darken {
    background-color:  var(--mud-palette-secondary-darken)!important;
}
.bg-color-secondary-hover {
    background-color:  var(--mud-palette-secondary-hover)!important;
}
.bg-color-tertiary {
    background-color:  var(--mud-palette-tertiary)!important;
}
.bg-color-tertiary-lighten {
    background-color:  var(--mud-palette-tertiary-lighten)!important;
}
.bg-color-tertiary-darken {
    background-color:  var(--mud-palette-tertiary-darken)!important;
}
.bg-color-tertiary-hover {
    background-color:  var(--mud-palette-tertiary-hover)!important;
}
.bg-color-action-default {
    background-color:  var(--mud-palette-action-default)!important;
}
.bg-color-info {
    background-color:  var(--mud-palette-info)!important;
}
.bg-color-info-lighten {
    background-color:  var(--mud-palette-info-lighten)!important;
}
.bg-color-info-darken {
    background-color:  var(--mud-palette-info-darken)!important;
}
.bg-color-info-hover {
    background-color:  var(--mud-palette-info-hover)!important;
}
.bg-color-success {
    background-color:  var(--mud-palette-success)!important;
}
.bg-color-success-lighten {
    background-color:  var(--mud-palette-success-lighten)!important;
}
.bg-color-success-darken {
    background-color:  var(--mud-palette-success-darken)!important;
}
.bg-color-success-hover {
    background-color:  var(--mud-palette-success-hover)!important;
}
.bg-color-warning {
    background-color:  var(--mud-palette-warning)!important;
}
.bg-color-warning-lighten {
    background-color:  var(--mud-palette-warning-lighten)!important;
}
.bg-color-warning-darken {
    background-color:  var(--mud-palette-warning-darken)!important;
}
.bg-color-warning-hover {
    background-color:  var(--mud-palette-warning-hover)!important;
}
.bg-color-error {
    background-color:  var(--mud-palette-error)!important;
}
.bg-color-error-lighten {
    background-color:  var(--mud-palette-error-lighten)!important;
}
.bg-color-error-darken {
    background-color:  var(--mud-palette-error-darken)!important;
}
.bg-color-error-hover {
    background-color:  var(--mud-palette-error-hover)!important;
}
.bg-color-dark {
    background-color:  var(--mud-palette-dark)!important;
}
.bg-color-dark-lighten {
    background-color:  var(--mud-palette-dark-lighten)!important;
}
.bg-color-dark-darken {
    background-color:  var(--mud-palette-dark-darken)!important;
}
.bg-color-dark-hover {
    background-color:  var(--mud-palette-dark-hover)!important;
}
.bg-color-text-primary {
    background-color: var(--mud-palette-text-primary)!important;
}
.bg-color-text-secondary {
    background-color: var(--mud-palette-text-secondary)!important;
}
.bg-color-text-disabled {
    background-color: var(--mud-palette-text-disabled)!important;
}
.bg-color-background {
    background-color:  var(--mud-palette-background)!important;
}
.bg-color-background-gray {
    background-color:  var(--mud-palette-background-gray)!important;
}
.bg-color-midnight-blue {
    background-color: var(--palette-midnight-blue) !important;
}
.bg-color-gray-light-with-blue {
    background-color: var(--palette-gray-light-with-blue) !important;
}

/* Foreground color classes */

.fg-color-black {
    color:  var(--mud-palette-black)!important;
}
.fg-color-white {
    color:  var(--mud-palette-white)!important;
}
.fg-color-gray {
    color:  var(--mud-palette-gray-default)!important;
}
.fg-color-gray-lighter {
    color:  var(--mud-palette-gray-lighter)!important;
}
.fg-color-gray-light {
    color:  var(--mud-palette-gray-light)!important;
}
.fg-color-gray-darker {
    color:  var(--mud-palette-gray-darker)!important;
}
.fg-color-gray-dark {
    color:  var(--mud-palette-gray-dark)!important;
}
.fg-color-primary {
    color:  var(--mud-palette-primary)!important;
}
.fg-color-primary-lighten {
    color:  var(--mud-palette-primary-lighten)!important;
}
.fg-color-primary-darken {
    color:  var(--mud-palette-primary-darken)!important;
}
.fg-color-primary-hover {
    color:  var(--mud-palette-primary-hover)!important;
}
.fg-color-secondary {
    color:  var(--mud-palette-secondary)!important;
}
.fg-color-secondary-lighten {
    color:  var(--mud-palette-secondary-lighten)!important;
}
.fg-color-secondary-darken {
    color:  var(--mud-palette-secondary-darken)!important;
}
.fg-color-secondary-hover {
    color:  var(--mud-palette-secondary-hover)!important;
}
.fg-color-tertiary {
    color:  var(--mud-palette-tertiary)!important;
}
.fg-color-tertiary-lighten {
    color:  var(--mud-palette-tertiary-lighten)!important;
}
.fg-color-tertiary-darken {
    color:  var(--mud-palette-tertiary-darken)!important;
}
.fg-color-tertiary-hover {
    color:  var(--mud-palette-tertiary-hover)!important;
}
.fg-color-action-default {
    color:  var(--mud-palette-action-default)!important;
}
.fg-color-info {
    color:  var(--mud-palette-info)!important;
}
.fg-color-info-lighten {
    color:  var(--mud-palette-info-lighten)!important;
}
.fg-color-info-darken {
    color:  var(--mud-palette-info-darken)!important;
}
.fg-color-info-hover {
    color:  var(--mud-palette-info-hover)!important;
}
.fg-color-success {
    color:  var(--mud-palette-success)!important;
}
.fg-color-success-lighten {
    color:  var(--mud-palette-success-lighten)!important;
}
.fg-color-success-darken {
    color:  var(--mud-palette-success-darken)!important;
}
.fg-color-success-hover {
    color:  var(--mud-palette-success-hover)!important;
}
.fg-color-warning {
    color:  var(--mud-palette-warning)!important;
}
.fg-color-warning-lighten {
    color:  var(--mud-palette-warning-lighten)!important;
}
.fg-color-warning-darken {
    color:  var(--mud-palette-warning-darken)!important;
}
.fg-color-warning-hover {
    color:  var(--mud-palette-warning-hover)!important;
}
.fg-color-error {
    color:  var(--mud-palette-error)!important;
}
.fg-color-error-lighten {
    color:  var(--mud-palette-error-lighten)!important;
}
.fg-color-error-darken {
    color:  var(--mud-palette-error-darken)!important;
}
.fg-color-error-hover {
    color:  var(--mud-palette-error-hover)!important;
}
.fg-color-dark {
    color:  var(--mud-palette-dark)!important;
}
.fg-color-dark-lighten {
    color:  var(--mud-palette-dark-lighten)!important;
}
.fg-color-dark-darken {
    color:  var(--mud-palette-dark-darken)!important;
}
.fg-color-dark-hover {
    color:  var(--mud-palette-dark-hover)!important;
}
.fg-color-text-primary {
    color: var(--mud-palette-text-primary)!important;
}
.fg-color-text-secondary {
    color: var(--mud-palette-text-secondary)!important;
}
.fg-color-text-disabled {
    color: var(--mud-palette-text-disabled)!important;
}
.fg-color-background {
    color:  var(--mud-palette-background)!important;
}
.fg-color-background-gray {
    color: var(--mud-palette-background-gray) !important;
}
.fg-color-midnight-blue {
    color: var(--palette-midnight-blue) !important;
}
.fg-color-gray-light-with-blue {
    color: var(--palette-gray-light-with-blue) !important;
}