/*
    Utilizando nomenclatura semelhante � do bootstrap
    Aqui cont�m as classes para utiliza��o das cores do sistema;
    Classes de cores: bg-<nome-cor>, text-<nome_cor>, border-<nome_cor>,
    Classes de botoes: btn-outline-<nome-cor>, btn-<nome-cor>
    Classes de Cores Hover:  bg-<nome-cor>-hover, text-<nome_cor>-hover
    Nome da cor pode ser encontrado no arquivo colors.css
*/



/* Produtos */
.bg-rcs{
    background-color: var(--rcs) !important;
}
.text-rcs{
    color: var(--rcs) !important;
}
[class~="border-dashed"].border-rcs, [class~="border-dotted"].border-rcs, [class~="border"].border-rcs{
    border-color: var(--rcs) !important;
}
[class~="border-dashed"].border-rcs-hover:hover, [class~="border-dotted"].border-rcs-hover:hover, [class~="border"].border-rcs-hover:hover{
    border-color: var(--rcs) !important;
}
.bg-rcs-hover:hover{
    background-color: var(--rcs) !important;
}
.text-rcs-hover:hover{
    color: var(--rcs) !important;
}
.btn.btn-outline-rcs {
    color: var(--rcs);
    background-color: #ffffff;
    border-color: var(--rcs);
}
.btn.btn-outline-rcs:hover,
.btn.btn-outline-rcs:active,
.btn.btn-outline-rcs:focus,
.btn.btn-outline-rcs.active {
    background: var(--rcs);
    color: #ffffff;
    border-color: var(--rcs);
}
.btn.btn-rcs {
    color: #fff;
    background-color: var(--rcs);
    border-color: var(--rcs);
}
.btn.btn-rcs:hover,
.btn.btn-rcs:active,
.btn.btn-rcs:focus,
.btn.btn-rcs.active {
    filter: brightness(80%);
    color: white;
}
.bg-whatsapp{
    background-color: var(--whatsapp) !important;
}
.text-whatsapp{
    color: var(--whatsapp) !important;
}
[class~="border-dashed"].border-whatsapp, [class~="border-dotted"].border-whatsapp, [class~="border"].border-whatsapp{
    border-color: var(--whatsapp) !important;
}
[class~="border-dashed"].border-whatsapp-hover:hover, [class~="border-dotted"].border-whatsapp-hover:hover, [class~="border"].border-whatsapp-hover:hover{
    border-color: var(--whatsapp) !important;
}
.bg-whatsapp-hover:hover{
    background-color: var(--whatsapp) !important;
}
.text-whatsapp-hover:hover{
    color: var(--whatsapp) !important;
}
.btn.btn-outline-whatsapp {
    color: var(--whatsapp);
    background-color: #ffffff;
    border-color: var(--whatsapp);
}
.btn.btn-outline-whatsapp:hover,
.btn.btn-outline-whatsapp:active,
.btn.btn-outline-whatsapp:focus,
.btn.btn-outline-whatsapp.active {
    background: var(--whatsapp);
    color: #ffffff;
    border-color: var(--whatsapp);
}
.btn.btn-whatsapp {
    color: #fff;
    background-color: var(--whatsapp);
    border-color: var(--whatsapp);
}
.btn.btn-whatsapp:hover,
.btn.btn-whatsapp:active,
.btn.btn-whatsapp:focus,
.btn.btn-whatsapp.active {
    filter: brightness(80%);
    color: white;
}
.bg-sms, 
.bg-sms-flash, 
.bg-sms-concatenado, 
.bg-sms-smart, 
.bg-sms-interativo {
    background-color: var(--sms) !important;
}
.text-sms, 
.text-sms-flash, 
.text-sms-concatenado, 
.text-sms-smart, 
.text-sms-interativo {
    color: var(--sms) !important;
}
[class~="border-dashed"].border-sms, [class~="border-dotted"].border-sms, [class~="border"].border-sms,
[class~="border-dashed"].border-sms-flash,, [class~="border-dotted"].border-sms-flash,, [class~="border"].border-sms-flash, 
[class~="border-dashed"].border-sms-concatenado,, [class~="border-dotted"].border-sms-concatenado,, [class~="border"].border-sms-concatenado, 
[class~="border-dashed"].border-sms-smart,, [class~="border-dotted"].border-sms-smart,, [class~="border"].border-sms-smart, 
[class~="border-dashed"].border-sms-interativo , [class~="border-dotted"].border-sms-interativo , [class~="border"].border-sms-interativo {
    border-color: var(--sms) !important;
}
[class~="border-dashed"].border-sms-hover:hover, [class~="border-dotted"].border-sms-hover:hover, [class~="border"].border-sms-hover:hover,
[class~="border-dashed"].border-sms-flash-hover:hover,, [class~="border-dotted"].border-sms-flash-hover:hover,, [class~="border"].border-sms-flash-hover:hover, 
[class~="border-dashed"].border-sms-concatenado-hover:hover,, [class~="border-dotted"].border-sms-concatenado-hover:hover,, [class~="border"].border-sms-concatenado-hover:hover, 
[class~="border-dashed"].border-sms-smart-hover:hover,, [class~="border-dotted"].border-sms-smart-hover:hover,, [class~="border"].border-sms-smart-hover:hover, 
[class~="border-dashed"].border-sms-interativo-hover:hover , [class~="border-dotted"].border-sms-interativo-hover:hover , [class~="border"].border-sms-interativo-hover:hover {
    border-color: var(--sms) !important;
}
.bg-sms-hover:hover, 
.bg-sms-flash-hover:hover, 
.bg-sms-concatenado-hover:hover, 
.bg-sms-smart-hover:hover, 
.bg-sms-interativo-hover:hover {
    background-color: var(--sms) !important;
}
.text-sms-hover:hover, 
.text-sms-flash-hover:hover, 
.text-sms-concatenado-hover:hover, 
.text-sms-smart-hover:hover, 
.text-sms-interativo-hover:hover {
    color: var(--sms) !important;
}
.btn.btn-outline-sms, 
.btn.btn-outline-sms-flash, 
.btn.btn-outline-sms-concatenado, 
.btn.btn-outline-sms-smart, 
.btn.btn-outline-sms-interativo {
    color: var(--sms);
    background-color: #ffffff;
    border-color: var(--sms);
}
.btn.btn-outline-sms:hover,
.btn.btn-outline-sms:active,
.btn.btn-outline-sms:focus,
.btn.btn-outline-sms.active,
.btn.btn-outline-sms-flash:hover,
.btn.btn-outline-sms-flash:active,
.btn.btn-outline-sms-flash:focus,
.btn.btn-outline-sms-flash.active,
.btn.btn-outline-sms-concatenado:hover,
.btn.btn-outline-sms-concatenado:active,
.btn.btn-outline-sms-concatenado:focus,
.btn.btn-outline-sms-concatenado.active,
.btn.btn-outline-sms-smart:hover,
.btn.btn-outline-sms-smart:active,
.btn.btn-outline-sms-smart:focus,
.btn.btn-outline-sms-smart.active,
.btn.btn-outline-sms-interativo:hover,
.btn.btn-outline-sms-interativo:active,
.btn.btn-outline-sms-interativo:focus,
.btn.btn-outline-sms-interativo.active {
    background: var(--sms);
    color: #ffffff;
    border-color: var(--sms);
}
.btn.btn-sms, 
.btn.btn-sms-flash, 
.btn.btn-sms-concatenado, 
.btn.btn-sms-smart, 
.btn.btn-sms-interativo {
    color: #fff;
    background-color: var(--sms);
    border-color: var(--sms);
}
.btn.btn-sms:hover,
.btn.btn-sms:active,
.btn.btn-sms:focus,
.btn.btn-sms.active,
.btn.btn-sms-flash:hover,
.btn.btn-sms-flash:active,
.btn.btn-sms-flash:focus,
.btn.btn-sms-flash.active,
.btn.btn-sms-concatenado:hover,
.btn.btn-sms-concatenado:active,
.btn.btn-sms-concatenado:focus,
.btn.btn-sms-concatenado.active,
.btn.btn-sms-smart:hover,
.btn.btn-sms-smart:active,
.btn.btn-sms-smart:focus,
.btn.btn-sms-smart.active,
.btn.btn-sms-interativo:hover,
.btn.btn-sms-interativo:active,
.btn.btn-sms-interativo:focus,
.btn.btn-sms-interativo.active {
    filter: brightness(80%);
    color: white;
}

/* Primary */

.bg-super-dark-primary{
    background-color: var(--super-dark-primary) !important;
}
.text-super-dark-primary{
    color: var(--super-dark-primary) !important;
}
[class~="border-dashed"].border-super-dark-primary, [class~="border-dotted"].border-super-dark-primary, [class~="border"].border-super-dark-primary{
    border-color: var(--super-dark-primary) !important;
}
[class~="border-dashed"].border-super-dark-primary-hover:hover, [class~="border-dotted"].border-super-dark-primary-hover:hover, [class~="border"].border-super-dark-primary-hover:hover{
    border-color: var(--super-dark-primary) !important;
}
.bg-super-dark-primary-hover:hover{
    background-color: var(--super-dark-primary) !important;
}
.text-super-dark-primary-hover:hover{
    color: var(--super-dark-primary) !important;
}
.btn.btn-outline-super-dark-primary {
    color: var(--super-dark-primary);
    background-color: #ffffff;
    border-color: var(--super-dark-primary);
}
.btn.btn-outline-super-dark-primary:hover,
.btn.btn-outline-super-dark-primary:active,
.btn.btn-outline-super-dark-primary:focus,
.btn.btn-outline-super-dark-primary.active {
    background: var(--super-dark-primary);
    color: #ffffff;
    border-color: var(--super-dark-primary);
}
.btn.btn-super-dark-primary {
    color: #fff;
    background-color: var(--super-dark-primary);
    border-color: var(--super-dark-primary);
}
.btn.btn-super-dark-primary:hover,
.btn.btn-super-dark-primary:active,
.btn.btn-super-dark-primary:focus,
.btn.btn-super-dark-primary.active {
    filter: brightness(80%);
    color: white;
}

.bg-dark-primary{
    background-color: var(--dark-primary) !important;
}
.text-dark-primary{
    color: var(--dark-primary) !important;
}
[class~="border-dashed"].border-dark-primary, [class~="border-dotted"].border-dark-primary, [class~="border"].border-dark-primary{
    border-color: var(--dark-primary) !important;
}
[class~="border-dashed"].border-dark-primary-hover:hover, [class~="border-dotted"].border-dark-primary-hover:hover, [class~="border"].border-dark-primary-hover:hover{
    border-color: var(--dark-primary) !important;
}
.bg-dark-primary-hover:hover{
    background-color: var(--dark-primary) !important;
}
.text-dark-primary-hover:hover{
    color: var(--dark-primary) !important;
}
.btn.btn-outline-dark-primary {
    color: var(--dark-primary);
    background-color: #ffffff;
    border-color: var(--dark-primary);
}
.btn.btn-outline-dark-primary:hover,
.btn.btn-outline-dark-primary:active,
.btn.btn-outline-dark-primary:focus,
.btn.btn-outline-dark-primary.active {
    background: var(--dark-primary);
    color: #ffffff;
    border-color: var(--dark-primary);
}
.btn.btn-dark-primary {
    color: #fff;
    background-color: var(--dark-primary);
    border-color: var(--dark-primary);
}
.btn.btn-dark-primary:hover,
.btn.btn-dark-primary:active,
.btn.btn-dark-primary:focus,
.btn.btn-dark-primary.active {
    filter: brightness(80%);
    color: white;
}
.bg-primary{
    background-color: var(--primary) !important;
}
.text-primary{
    color: var(--primary) !important;
}
[class~="border-dashed"].border-primary, [class~="border-dotted"].border-primary, [class~="border"].border-primary{
    border-color: var(--primary) !important;
}
[class~="border-dashed"].border-primary-hover:hover, [class~="border-dotted"].border-primary-hover:hover, [class~="border"].border-primary-hover:hover{
    border-color: var(--primary) !important;
}
.bg-primary-hover:hover{
    background-color: var(--primary) !important;
}
.text-primary-hover:hover{
    color: var(--primary) !important;
}
.btn.btn-outline-primary {
    color: var(--primary);
    background-color: #ffffff;
    border-color: var(--primary);
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}
.btn.btn-primary {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:not(:disabled):not(.disabled).active {
    filter: brightness(80%);
    background-color: var(--primary);
    color: white;
}
.bg-light-primary{
    background-color: var(--light-primary) !important;
}
.text-light-primary{
    color: var(--light-primary) !important;
}
[class~="border-dashed"].border-light-primary, [class~="border-dotted"].border-light-primary, [class~="border"].border-light-primary{
    border-color: var(--light-primary) !important;
}
[class~="border-dashed"].border-light-primary-hover:hover, [class~="border-dotted"].border-light-primary-hover:hover, [class~="border"].border-light-primary-hover:hover{
    border-color: var(--light-primary) !important;
}
.bg-light-primary-hover:hover{
    background-color: var(--light-primary) !important;
}
.text-light-primary-hover:hover{
    color: var(--light-primary) !important;
}
.btn.btn-outline-light-primary {
    color: var(--light-primary);
    background-color: #ffffff;
    border-color: var(--light-primary);
}
.btn.btn-outline-light-primary:hover,
.btn.btn-outline-light-primary:active,
.btn.btn-outline-light-primary:focus,
.btn.btn-outline-light-primary.active {
    background: var(--light-primary);
    color: #ffffff;
    border-color: var(--light-primary);
}
.btn.btn-light-primary {
    color: #fff;
    background-color: var(--light-primary);
    border-color: var(--light-primary);
}
.btn.btn-light-primary:hover,
.btn.btn-light-primary:active,
.btn.btn-light-primary:focus,
.btn.btn-light-primary.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-primary{
    background-color: var(--extra-light-primary) !important;
}
.text-extra-light-primary{
    color: var(--extra-light-primary) !important;
}
.border-extra-light-primary{
    border-color: var(--extra-light-primary) !important;
}
.border-extra-light-primary-hover:hover{
    border-color: var(--extra-light-primary) !important;
}
.bg-extra-light-primary-hover:hover{
    background-color: var(--extra-light-primary) !important;
}
.text-extra-light-primary-hover:hover{
    color: var(--extra-light-primary) !important;
}
.btn.btn-outline-extra-light-primary {
    color: var(--extra-light-primary);
    background-color: #ffffff;
    border-color: var(--extra-light-primary);
}
.btn.btn-outline-extra-light-primary:hover,
.btn.btn-outline-extra-light-primary:active,
.btn.btn-outline-extra-light-primary:focus,
.btn.btn-outline-extra-light-primary.active {
    background: var(--extra-light-primary);
    color: #ffffff;
    border-color: var(--extra-light-primary);
}
.btn.btn-extra-light-primary {
    color: #fff;
    background-color: var(--extra-light-primary);
    border-color: var(--extra-light-primary);
}
.btn.btn-extra-light-primary:hover,
.btn.btn-extra-light-primary:active,
.btn.btn-extra-light-primary:focus,
.btn.btn-extra-light-primary.active {
    filter: brightness(80%);
    color: white;
}

/* Escala de cinza */
.bg-light-grey{
    background-color: var(--light-grey) !important;
}
.text-light-grey{
    color: var(--light-grey) !important;
}
[class~="border-dashed"].border-light-grey, [class~="border-dotted"].border-light-grey, [class~="border"].border-light-grey{
    border-color: var(--light-grey) !important;
}
[class~="border-dashed"].border-light-grey-hover:hover, [class~="border-dotted"].border-light-grey-hover:hover, [class~="border"].border-light-grey-hover:hover{
    border-color: var(--light-grey) !important;
}
.bg-light-grey-hover:hover{
    background-color: var(--light-grey) !important;
}
.text-light-grey-hover:hover{
    color: var(--light-grey) !important;
}
.btn.btn-outline-light-grey {
    color: var(--light-grey);
    background-color: #ffffff;
    border-color: var(--light-grey);
}
.btn.btn-outline-light-grey:hover,
.btn.btn-outline-light-grey:active,
.btn.btn-outline-light-grey:focus,
.btn.btn-outline-light-grey.active {
    background: var(--light-grey);
    color: #ffffff;
    border-color: var(--light-grey);
}
.btn.btn-light-grey {
    color: #fff;
    background-color: var(--light-grey);
    border-color: var(--light-grey);
}
.btn.btn-light-grey:hover,
.btn.btn-light-grey:active,
.btn.btn-light-grey:focus,
.btn.btn-light-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-medium-light-grey{
    background-color: var(--medium-light-grey) !important;
}
.text-medium-light-grey{
    color: var(--medium-light-grey) !important;
}
[class~="border-dashed"].border-medium-light-grey, [class~="border-dotted"].border-medium-light-grey, [class~="border"].border-medium-light-grey{
    border-color: var(--medium-light-grey) !important;
}
[class~="border-dashed"].border-medium-light-grey-hover:hover, [class~="border-dotted"].border-medium-light-grey-hover:hover, [class~="border"].border-medium-light-grey-hover:hover{
    border-color: var(--medium-light-grey) !important;
}
.bg-medium-light-grey-hover:hover{
    background-color: var(--medium-light-grey) !important;
}
.text-medium-light-grey-hover:hover{
    color: var(--medium-light-grey) !important;
}
.btn.btn-outline-medium-light-grey {
    color: var(--medium-light-grey);
    background-color: #ffffff;
    border-color: var(--medium-light-grey);
}
.btn.btn-outline-medium-light-grey:hover,
.btn.btn-outline-medium-light-grey:active,
.btn.btn-outline-medium-light-grey:focus,
.btn.btn-outline-medium-light-grey.active {
    background: var(--medium-light-grey);
    color: #ffffff;
    border-color: var(--medium-light-grey);
}
.btn.btn-medium-light-grey {
    color: #fff;
    background-color: var(--medium-light-grey);
    border-color: var(--medium-light-grey);
}
.btn.btn-medium-light-grey:hover,
.btn.btn-medium-light-grey:active,
.btn.btn-medium-light-grey:focus,
.btn.btn-medium-light-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-medium-grey{
    background-color: var(--medium-grey) !important;
}
.text-medium-grey{
    color: var(--medium-grey) !important;
}
[class~="border-dashed"].border-medium-grey, [class~="border-dotted"].border-medium-grey, [class~="border"].border-medium-grey{
    border-color: var(--medium-grey) !important;
}
[class~="border-dashed"].border-medium-grey-hover:hover, [class~="border-dotted"].border-medium-grey-hover:hover, [class~="border"].border-medium-grey-hover:hover{
    border-color: var(--medium-grey) !important;
}
.bg-medium-grey-hover:hover{
    background-color: var(--medium-grey) !important;
}
.text-medium-grey-hover:hover{
    color: var(--medium-grey) !important;
}
.btn.btn-outline-medium-grey {
    color: var(--medium-grey);
    background-color: #ffffff;
    border-color: var(--medium-grey);
}
.btn.btn-outline-medium-grey:hover,
.btn.btn-outline-medium-grey:active,
.btn.btn-outline-medium-grey:focus,
.btn.btn-outline-medium-grey.active {
    background: var(--medium-grey);
    color: #ffffff;
    border-color: var(--medium-grey);
}
.btn-medium-grey {
    color: #fff !important;
    background-color: var(--medium-grey) !important;
    border-color: var(--medium-grey) !important;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 0;
}
.btn.btn-medium-grey:hover,
.btn.btn-medium-grey:active,
.btn.btn-medium-grey:focus,
.btn.btn-medium-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-medium-dark-grey{
    background-color: var(--medium-dark-grey) !important;
}
.text-medium-dark-grey{
    color: var(--medium-dark-grey) !important;
}
[class~="border-dashed"].border-medium-dark-grey, [class~="border-dotted"].border-medium-dark-grey, [class~="border"].border-medium-dark-grey{
    border-color: var(--medium-dark-grey) !important;
}
[class~="border-dashed"].border-medium-dark-grey-hover:hover, [class~="border-dotted"].border-medium-dark-grey-hover:hover, [class~="border"].border-medium-dark-grey-hover:hover{
    border-color: var(--medium-dark-grey) !important;
}
.bg-medium-dark-grey-hover:hover{
    background-color: var(--medium-dark-grey) !important;
}
.text-medium-dark-grey-hover:hover{
    color: var(--medium-dark-grey) !important;
}
.btn.btn-outline-medium-dark-grey {
    color: var(--medium-dark-grey);
    background-color: #ffffff;
    border-color: var(--medium-dark-grey);
}
.btn.btn-outline-medium-dark-grey:hover,
.btn.btn-outline-medium-dark-grey:active,
.btn.btn-outline-medium-dark-grey:focus,
.btn.btn-outline-medium-dark-grey.active {
    background: var(--medium-dark-grey);
    color: #ffffff;
    border-color: var(--medium-dark-grey);
}
.btn.btn-medium-dark-grey {
    color: #fff;
    background-color: var(--medium-dark-grey);
    border-color: var(--medium-dark-grey);
}
.btn.btn-medium-dark-grey:hover,
.btn.btn-medium-dark-grey:active,
.btn.btn-medium-dark-grey:focus,
.btn.btn-medium-dark-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-dark-grey{
    background-color: var(--dark-grey) !important;
}
.text-dark-grey{
    color: var(--dark-grey) !important;
}
[class~="border-dashed"].border-dark-grey, [class~="border-dotted"].border-dark-grey, [class~="border"].border-dark-grey{
    border-color: var(--dark-grey) !important;
}
[class~="border-dashed"].border-dark-grey-hover:hover, [class~="border-dotted"].border-dark-grey-hover:hover, [class~="border"].border-dark-grey-hover:hover{
    border-color: var(--dark-grey) !important;
}
.bg-dark-grey-hover:hover{
    background-color: var(--dark-grey) !important;
}
.text-dark-grey-hover:hover{
    color: var(--dark-grey) !important;
}
.btn.btn-outline-dark-grey {
    color: var(--dark-grey);
    background-color: #ffffff;
    border-color: var(--dark-grey);
}
.btn.btn-outline-dark-grey:hover,
.btn.btn-outline-dark-grey:active,
.btn.btn-outline-dark-grey:focus,
.btn.btn-outline-dark-grey.active {
    background: var(--dark-grey);
    color: #ffffff;
    border-color: var(--dark-grey);
}
.btn.btn-dark-grey {
    color: #fff;
    background-color: var(--dark-grey);
    border-color: var(--dark-grey);
}
.btn.btn-dark-grey:hover,
.btn.btn-dark-grey:active,
.btn.btn-dark-grey:focus,
.btn.btn-dark-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-dark-grey{
    background-color: var(--extra-dark-grey) !important;
}
.text-extra-dark-grey{
    color: var(--extra-dark-grey) !important;
}
[class~="border-dashed"].border-extra-dark-grey, [class~="border-dotted"].border-extra-dark-grey, [class~="border"].border-extra-dark-grey{
    border-color: var(--extra-dark-grey) !important;
}
[class~="border-dashed"].border-extra-dark-grey-hover:hover, [class~="border-dotted"].border-extra-dark-grey-hover:hover, [class~="border"].border-extra-dark-grey-hover:hover{
    border-color: var(--extra-dark-grey) !important;
}
.bg-extra-dark-grey-hover:hover{
    background-color: var(--extra-dark-grey) !important;
}
.text-extra-dark-grey-hover:hover{
    color: var(--extra-dark-grey) !important;
}
.btn.btn-outline-extra-dark-grey {
    color: var(--extra-dark-grey);
    background-color: #ffffff;
    border-color: var(--extra-dark-grey);
}
.btn.btn-outline-extra-dark-grey:hover,
.btn.btn-outline-extra-dark-grey:active,
.btn.btn-outline-extra-dark-grey:focus,
.btn.btn-outline-extra-dark-grey.active {
    background: var(--extra-dark-grey);
    color: #ffffff;
    border-color: var(--extra-dark-grey);
}
.btn-extra-dark-grey {
    color: #fff !important;
    background-color: var(--extra-dark-grey) !important;
    border-color: var(--extra-dark-grey);
}
.btn.btn-extra-dark-grey:hover,
.btn.btn-extra-dark-grey:active,
.btn.btn-extra-dark-grey:focus,
.btn.btn-extra-dark-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-of-white{
    background-color: var(--of-white) !important;
}
.text-of-white{
    color: var(--of-white) !important;
}
[class~="border-dashed"].border-of-white, [class~="border-dotted"].border-of-white, [class~="border"].border-of-white{
    border-color: var(--of-white) !important;
}
[class~="border-dashed"].border-of-white-hover:hover, [class~="border-dotted"].border-of-white-hover:hover, [class~="border"].border-of-white-hover:hover{
    border-color: var(--of-white) !important;
}
.bg-of-white-hover:hover{
    background-color: var(--of-white) !important;
}
.text-of-white-hover:hover{
    color: var(--of-white) !important;
}
.btn.btn-outline-of-white {
    color: var(--of-white);
    background-color: #ffffff;
    border-color: var(--of-white);
}
.btn.btn-outline-of-white:hover,
.btn.btn-outline-of-white:active,
.btn.btn-outline-of-white:focus,
.btn.btn-outline-of-white.active {
    background: var(--of-white);
    color: #ffffff;
    border-color: var(--of-white);
}
.btn.btn-of-white {
    color: #fff;
    background-color: var(--of-white);
    border-color: var(--of-white);
}
.btn.btn-of-white:hover,
.btn.btn-of-white:active,
.btn.btn-of-white:focus,
.btn.btn-of-white.active {
    filter: brightness(80%);
    color: white;
}
.bg-background{
    background-color: var(--background) !important;
}
.bg-transparent{
    background-color: transparent !important;
}
.text-background{
    color: var(--background) !important;
}
[class~="border-dashed"].border-background, [class~="border-dotted"].border-background, [class~="border"].border-background{
    border-color: var(--background) !important;
}
[class~="border-dashed"].border-background-hover:hover, [class~="border-dotted"].border-background-hover:hover, [class~="border"].border-background-hover:hover{
    border-color: var(--background) !important;
}
.bg-background-hover:hover{
    background-color: var(--background) !important;
}
.text-background-hover:hover{
    color: var(--background) !important;
}
.btn.btn-outline-background {
    color: var(--background);
    background-color: #ffffff;
    border-color: var(--background);
}
.btn.btn-outline-background:hover,
.btn.btn-outline-background:active,
.btn.btn-outline-background:focus,
.btn.btn-outline-background.active {
    background: var(--background);
    color: #ffffff;
    border-color: var(--background);
}
.btn.btn-background {
    color: #fff;
    background-color: var(--background);
    border-color: var(--background);
}
.btn.btn-background:hover,
.btn.btn-background:active,
.btn.btn-background:focus,
.btn.btn-background.active {
    filter: brightness(80%);
    color: white;
}
.bg-super-light-grey{
    background-color: var(--super-light-grey) !important;
}
.text-super-light-grey{
    color: var(--super-light-grey) !important;
}
[class~="border-dashed"].border-super-light-grey, [class~="border-dotted"].border-super-light-grey, [class~="border"].border-super-light-grey{
    border-color: var(--super-light-grey) !important;
}
[class~="border-dashed"].border-super-light-grey-hover:hover, [class~="border-dotted"].border-super-light-grey-hover:hover, [class~="border"].border-super-light-grey-hover:hover{
    border-color: var(--super-light-grey) !important;
}
.bg-super-light-grey-hover:hover{
    background-color: var(--super-light-grey) !important;
}
.text-super-light-grey-hover:hover{
    color: var(--super-light-grey) !important;
}
.btn.btn-outline-super-light-grey {
    color: var(--super-light-grey);
    background-color: #ffffff;
    border-color: var(--super-light-grey);
}
.btn.btn-outline-super-light-grey:hover,
.btn.btn-outline-super-light-grey:active,
.btn.btn-outline-super-light-grey:focus,
.btn.btn-outline-super-light-grey.active {
    background: var(--super-light-grey);
    color: #ffffff;
    border-color: var(--super-light-grey);
}
.btn.btn-super-light-grey {
    color: #fff;
    background-color: var(--super-light-grey);
    border-color: var(--super-light-grey);
}
.btn.btn-super-light-grey:hover,
.btn.btn-super-light-grey:active,
.btn.btn-super-light-grey:focus,
.btn.btn-super-light-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-grey{
    background-color: var(--extra-light-grey) !important;
}
.text-extra-light-grey{
    color: var(--extra-light-grey) !important;
}
.border-extra-light-grey{
    border-color: var(--extra-light-grey) !important;
}
.border-extra-light-grey-hover:hover{
    border-color: var(--extra-light-grey) !important;
}
.bg-extra-light-grey-hover:hover{
    background-color: var(--extra-light-grey) !important;
}
.text-extra-light-grey-hover:hover{
    color: var(--extra-light-grey) !important;
}
.btn.btn-outline-extra-light-grey {
    color: var(--extra-light-grey);
    background-color: #ffffff;
    border-color: var(--extra-light-grey);
}
.btn.btn-outline-extra-light-grey:hover,
.btn.btn-outline-extra-light-grey:active,
.btn.btn-outline-extra-light-grey:focus,
.btn.btn-outline-extra-light-grey.active {
    background: var(--extra-light-grey);
    color: #ffffff;
    border-color: var(--extra-light-grey);
}
.btn.btn-extra-light-grey {
    color: #fff;
    background-color: var(--extra-light-grey);
    border-color: var(--extra-light-grey);
}
.btn.btn-extra-light-grey:hover,
.btn.btn-extra-light-grey:active,
.btn.btn-extra-light-grey:focus,
.btn.btn-extra-light-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-super-dark-grey{
    background-color: var(--super-dark-grey) !important;
}
.text-super-dark-grey{
    color: var(--super-dark-grey) !important;
}
[class~="border-dashed"].border-super-dark-grey, [class~="border-dotted"].border-super-dark-grey, [class~="border"].border-super-dark-grey{
    border-color: var(--super-dark-grey) !important;
}
[class~="border-dashed"].border-super-dark-grey-hover:hover, [class~="border-dotted"].border-super-dark-grey-hover:hover, [class~="border"].border-super-dark-grey-hover:hover{
    border-color: var(--super-dark-grey) !important;
}
.bg-super-dark-grey-hover:hover{
    background-color: var(--super-dark-grey) !important;
}
.text-super-dark-grey-hover:hover{
    color: var(--super-dark-grey) !important;
}
.btn.btn-outline-super-dark-grey {
    color: var(--super-dark-grey);
    background-color: #ffffff;
    border-color: var(--super-dark-grey);
}
.btn.btn-outline-super-dark-grey:hover,
.btn.btn-outline-super-dark-grey:active,
.btn.btn-outline-super-dark-grey:focus,
.btn.btn-outline-super-dark-grey.active {
    background: var(--super-dark-grey);
    color: #ffffff;
    border-color: var(--super-dark-grey);
}
.btn.btn-super-dark-grey {
    color: #fff;
    background-color: var(--super-dark-grey);
    border-color: var(--super-dark-grey);
}
.btn.btn-super-dark-grey:hover,
.btn.btn-super-dark-grey:active,
.btn.btn-super-dark-grey:focus,
.btn.btn-super-dark-grey.active {
    filter: brightness(80%);
    color: white;
}
.bg-black{
    background-color: var(--black) !important;
}
.text-black{
    color: var(--black) !important;
}
[class~="border-dashed"].border-black, [class~="border-dotted"].border-black, [class~="border"].border-black{
    border-color: var(--black) !important;
}
[class~="border-dashed"].border-black-hover:hover, [class~="border-dotted"].border-black-hover:hover, [class~="border"].border-black-hover:hover{
    border-color: var(--black) !important;
}
.bg-black-hover:hover{
    background-color: var(--black) !important;
}
.text-black-hover:hover{
    color: var(--black) !important;
}
.btn.btn-outline-black {
    color: var(--black);
    background-color: #ffffff;
    border-color: var(--black);
}
.btn.btn-outline-black:hover,
.btn.btn-outline-black:active,
.btn.btn-outline-black:focus,
.btn.btn-outline-black.active {
    background: var(--black);
    color: #ffffff;
    border-color: var(--black);
}
.btn.btn-black {
    color: #fff;
    background-color: var(--black);
    border-color: var(--black);
}
.btn.btn-black:hover,
.btn.btn-black:active,
.btn.btn-black:focus,
.btn.btn-black.active {
    filter: brightness(80%);
    color: white;
}

/* Success */
.bg-dark-success{
    background-color: var(--dark-success) !important;
}
.text-dark-success{
    color: var(--dark-success) !important;
}
[class~="border-dashed"].border-dark-success, [class~="border-dotted"].border-dark-success, [class~="border"].border-dark-success{
    border-color: var(--dark-success) !important;
}
[class~="border-dashed"].border-dark-success-hover:hover, [class~="border-dotted"].border-dark-success-hover:hover, [class~="border"].border-dark-success-hover:hover{
    border-color: var(--dark-success) !important;
}
.bg-dark-success-hover:hover{
    background-color: var(--dark-success) !important;
}
.text-dark-success-hover:hover{
    color: var(--dark-success) !important;
}
.btn.btn-outline-dark-success {
    color: var(--dark-success);
    background-color: #ffffff;
    border-color: var(--dark-success);
}
.btn.btn-outline-dark-success:hover,
.btn.btn-outline-dark-success:active,
.btn.btn-outline-dark-success:focus,
.btn.btn-outline-dark-success.active {
    background: var(--dark-success);
    color: #ffffff;
    border-color: var(--dark-success);
}
.btn.btn-dark-success {
    color: #fff;
    background-color: var(--dark-success);
    border-color: var(--dark-success);
}
.btn.btn-dark-success:hover,
.btn.btn-dark-success:active,
.btn.btn-dark-success:focus,
.btn.btn-dark-success.active {
    filter: brightness(80%);
    color: white;
}
.bg-success{
    background-color: var(--success) !important;
}
.text-success{
    color: var(--success) !important;
}
[class~="border-dashed"].border-success, [class~="border-dotted"].border-success, [class~="border"].border-success{
    border-color: var(--success) !important;
}
[class~="border-dashed"].border-success-hover:hover, [class~="border-dotted"].border-success-hover:hover, [class~="border"].border-success-hover:hover{
    border-color: var(--success) !important;
}
.bg-success-hover:hover{
    background-color: var(--success) !important;
}
.text-success-hover:hover{
    color: var(--success) !important;
}
.btn.btn-outline-success {
    color: var(--success);
    background-color: #ffffff;
    border-color: var(--success);
}
.btn.btn-outline-success:hover,
.btn.btn-outline-success:active,
.btn.btn-outline-success:focus,
.btn.btn-outline-success.active {
    background: var(--success);
    color: #ffffff;
    border-color: var(--success);
}
.btn.btn-success {
    color: #fff;
    background-color: var(--success);
    border-color: var(--success);
}
.btn.btn-success:hover,
.btn.btn-success:active,
.btn.btn-success:focus,
.btn.btn-success.active {
    filter: brightness(80%);
    color: white;
}
.bg-light-success{
    background-color: var(--light-success) !important;
}
.text-light-success{
    color: var(--light-success) !important;
}
[class~="border-dashed"].border-light-success, [class~="border-dotted"].border-light-success, [class~="border"].border-light-success{
    border-color: var(--light-success) !important;
}
[class~="border-dashed"].border-light-success-hover:hover, [class~="border-dotted"].border-light-success-hover:hover, [class~="border"].border-light-success-hover:hover{
    border-color: var(--light-success) !important;
}
.bg-light-success-hover:hover{
    background-color: var(--light-success) !important;
}
.text-light-success-hover:hover{
    color: var(--light-success) !important;
}
.btn.btn-outline-light-success {
    color: var(--light-success);
    background-color: #ffffff;
    border-color: var(--light-success);
}
.btn.btn-outline-light-success:hover,
.btn.btn-outline-light-success:active,
.btn.btn-outline-light-success:focus,
.btn.btn-outline-light-success.active {
    background: var(--light-success);
    color: #ffffff;
    border-color: var(--light-success);
}
.btn.btn-light-success {
    color: #fff;
    background-color: var(--light-success);
    border-color: var(--light-success);
}
.btn.btn-light-success:hover,
.btn.btn-light-success:active,
.btn.btn-light-success:focus,
.btn.btn-light-success.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-success{
    background-color: var(--extra-light-success) !important;
}
.text-extra-light-success{
    color: var(--extra-light-success) !important;
}
[class~="border-dashed"].border-extra-light-success, [class~="border-dotted"].border-extra-light-success, [class~="border"].border-extra-light-success{
    border-color: var(--extra-light-success) !important;
}
[class~="border-dashed"].border-extra-light-success-hover:hover, [class~="border-dotted"].border-extra-light-success-hover:hover, [class~="border"].border-extra-light-success-hover:hover{
    border-color: var(--extra-light-success) !important;
}
.bg-extra-light-success-hover:hover{
    background-color: var(--extra-light-success) !important;
}
.text-extra-light-success-hover:hover{
    color: var(--extra-light-success) !important;
}
.btn.btn-outline-extra-light-success {
    color: var(--extra-light-success);
    background-color: #ffffff;
    border-color: var(--extra-light-success);
}
.btn.btn-outline-extra-light-success:hover,
.btn.btn-outline-extra-light-success:active,
.btn.btn-outline-extra-light-success:focus,
.btn.btn-outline-extra-light-success.active {
    background: var(--extra-light-success);
    color: #ffffff;
    border-color: var(--extra-light-success);
}
.btn.btn-extra-light-success {
    color: #fff;
    background-color: var(--extra-light-success);
    border-color: var(--extra-light-success);
}
.btn.btn-extra-light-success:hover,
.btn.btn-extra-light-success:active,
.btn.btn-extra-light-success:focus,
.btn.btn-extra-light-success.active {
    filter: brightness(80%);
    color: white;
}

/* Danger */
.bg-dark-danger{
    background-color: var(--dark-danger) !important;
}
.text-dark-danger{
    color: var(--dark-danger) !important;
}
[class~="border-dashed"].border-dark-danger, [class~="border-dotted"].border-dark-danger, [class~="border"].border-dark-danger{
    border-color: var(--dark-danger) !important;
}
[class~="border-dashed"].border-dark-danger-hover:hover, [class~="border-dotted"].border-dark-danger-hover:hover, [class~="border"].border-dark-danger-hover:hover{
    border-color: var(--dark-danger) !important;
}
.bg-dark-danger-hover:hover{
    background-color: var(--dark-danger) !important;
}
.text-dark-danger-hover:hover{
    color: var(--dark-danger) !important;
}
.btn.btn-outline-dark-danger {
    color: var(--dark-danger);
    background-color: #ffffff;
    border-color: var(--dark-danger);
}
.btn.btn-outline-dark-danger:hover,
.btn.btn-outline-dark-danger:active,
.btn.btn-outline-dark-danger:focus,
.btn.btn-outline-dark-danger.active {
    background: var(--dark-danger);
    color: #ffffff;
    border-color: var(--dark-danger);
}
.btn.btn-dark-danger {
    color: #fff;
    background-color: var(--dark-danger);
    border-color: var(--dark-danger);
}
.btn.btn-dark-danger:hover,
.btn.btn-dark-danger:active,
.btn.btn-dark-danger:focus,
.btn.btn-dark-danger.active {
    filter: brightness(80%);
    color: white;
}
.bg-danger{
    background-color: var(--danger) !important;
}
.text-danger{
    color: var(--danger) !important;
}
[class~="border-dashed"].border-danger, [class~="border-dotted"].border-danger, [class~="border"].border-danger{
    border-color: var(--danger) !important;
}
[class~="border-dashed"].border-danger-hover:hover, [class~="border-dotted"].border-danger-hover:hover, [class~="border"].border-danger-hover:hover{
    border-color: var(--danger) !important;
}
.bg-danger-hover:hover{
    background-color: var(--danger) !important;
}
.text-danger-hover:hover{
    color: var(--danger) !important;
}
.btn.btn-outline-danger {
    color: var(--danger);
    background-color: #ffffff;
    border-color: var(--danger);
}
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:active,
.btn.btn-outline-danger:focus,
.btn.btn-outline-danger.active {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}
.btn.btn-danger {
    color: #fff;
    background-color: var(--danger);
    border-color: var(--danger);
}
.btn.btn-danger:hover,
.btn.btn-danger:active,
.btn.btn-danger:focus,
.btn.btn-danger.active {
    filter: brightness(80%);
    color: white;
}
.bg-light-danger{
    background-color: var(--light-danger) !important;
}
.text-light-danger{
    color: var(--light-danger) !important;
}
[class~="border-dashed"].border-light-danger, [class~="border-dotted"].border-light-danger, [class~="border"].border-light-danger{
    border-color: var(--light-danger) !important;
}
[class~="border-dashed"].border-light-danger-hover:hover, [class~="border-dotted"].border-light-danger-hover:hover, [class~="border"].border-light-danger-hover:hover{
    border-color: var(--light-danger) !important;
}
.bg-light-danger-hover:hover{
    background-color: var(--light-danger) !important;
}
.text-light-danger-hover:hover{
    color: var(--light-danger) !important;
}
.btn.btn-outline-light-danger {
    color: var(--light-danger);
    background-color: #ffffff;
    border-color: var(--light-danger);
}
.btn.btn-outline-light-danger:hover,
.btn.btn-outline-light-danger:active,
.btn.btn-outline-light-danger:focus,
.btn.btn-outline-light-danger.active {
    background: var(--light-danger);
    color: #ffffff;
    border-color: var(--light-danger);
}
.btn.btn-light-danger {
    color: #fff;
    background-color: var(--light-danger);
    border-color: var(--light-danger);
}
.btn.btn-light-danger:hover,
.btn.btn-light-danger:active,
.btn.btn-light-danger:focus,
.btn.btn-light-danger.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-danger{
    background-color: var(--extra-light-danger) !important;
}
.text-extra-light-danger{
    color: var(--extra-light-danger) !important;
}
[class~="border-dashed"].border-extra-light-danger, [class~="border-dotted"].border-extra-light-danger, [class~="border"].border-extra-light-danger{
    border-color: var(--extra-light-danger) !important;
}
[class~="border-dashed"].border-extra-light-danger-hover:hover, [class~="border-dotted"].border-extra-light-danger-hover:hover, [class~="border"].border-extra-light-danger-hover:hover{
    border-color: var(--extra-light-danger) !important;
}
.bg-extra-light-danger-hover:hover{
    background-color: var(--extra-light-danger) !important;
}
.text-extra-light-danger-hover:hover{
    color: var(--extra-light-danger) !important;
}
.btn.btn-outline-extra-light-danger {
    color: var(--extra-light-danger);
    background-color: #ffffff;
    border-color: var(--extra-light-danger);
}
.btn.btn-outline-extra-light-danger:hover,
.btn.btn-outline-extra-light-danger:active,
.btn.btn-outline-extra-light-danger:focus,
.btn.btn-outline-extra-light-danger.active {
    background: var(--extra-light-danger);
    color: #ffffff;
    border-color: var(--extra-light-danger);
}
.btn.btn-extra-light-danger {
    color: #fff;
    background-color: var(--extra-light-danger);
    border-color: var(--extra-light-danger);
}
.btn.btn-extra-light-danger:hover,
.btn.btn-extra-light-danger:active,
.btn.btn-extra-light-danger:focus,
.btn.btn-extra-light-danger.active {
    filter: brightness(80%);
    color: white;
}

/* Warning */
.bg-dark-warning{
    background-color: var(--dark-warning) !important;
}
.text-dark-warning{
    color: var(--dark-warning) !important;
}
[class~="border-dashed"].border-dark-warning, [class~="border-dotted"].border-dark-warning, [class~="border"].border-dark-warning{
    border-color: var(--dark-warning) !important;
}
[class~="border-dashed"].border-dark-warning-hover:hover, [class~="border-dotted"].border-dark-warning-hover:hover, [class~="border"].border-dark-warning-hover:hover{
    border-color: var(--dark-warning) !important;
}
.bg-dark-warning-hover:hover{
    background-color: var(--dark-warning) !important;
}
.text-dark-warning-hover:hover{
    color: var(--dark-warning) !important;
}
.btn.btn-outline-dark-warning {
    color: var(--dark-warning);
    background-color: #ffffff;
    border-color: var(--dark-warning);
}
.btn.btn-outline-dark-warning:hover,
.btn.btn-outline-dark-warning:active,
.btn.btn-outline-dark-warning:focus,
.btn.btn-outline-dark-warning.active {
    background: var(--dark-warning);
    color: #ffffff;
    border-color: var(--dark-warning);
}
.btn.btn-dark-warning {
    color: #fff;
    background-color: var(--dark-warning);
    border-color: var(--dark-warning);
}
.btn.btn-dark-warning:hover,
.btn.btn-dark-warning:active,
.btn.btn-dark-warning:focus,
.btn.btn-dark-warning.active {
    filter: brightness(80%);
    color: white;
}
.bg-warning{
    background-color: var(--warning) !important;
}
.text-warning{
    color: var(--warning) !important;
}
[class~="border-dashed"].border-warning, [class~="border-dotted"].border-warning, [class~="border"].border-warning{
    border-color: var(--warning) !important;
}
[class~="border-dashed"].border-warning-hover:hover, [class~="border-dotted"].border-warning-hover:hover, [class~="border"].border-warning-hover:hover{
    border-color: var(--warning) !important;
}
.bg-warning-hover:hover{
    background-color: var(--warning) !important;
}
.text-warning-hover:hover{
    color: var(--warning) !important;
}
.btn.btn-outline-warning {
    color: var(--warning);
    background-color: #ffffff;
    border-color: var(--warning);
}
.btn.btn-outline-warning:hover,
.btn.btn-outline-warning:active,
.btn.btn-outline-warning:focus,
.btn.btn-outline-warning.active {
    background: var(--warning);
    color: #ffffff;
    border-color: var(--warning);
}
.btn.btn-warning {
    color: #fff;
    background-color: var(--warning);
    border-color: var(--warning);
}
.btn.btn-warning:hover,
.btn.btn-warning:active,
.btn.btn-warning:focus,
.btn.btn-warning.active {
    filter: brightness(80%);
    color: white;
}
.bg-light-warning{
    background-color: var(--light-warning) !important;
}
.text-light-warning{
    color: var(--light-warning) !important;
}
[class~="border-dashed"].border-light-warning, [class~="border-dotted"].border-light-warning, [class~="border"].border-light-warning{
    border-color: var(--light-warning) !important;
}
[class~="border-dashed"].border-light-warning-hover:hover, [class~="border-dotted"].border-light-warning-hover:hover, [class~="border"].border-light-warning-hover:hover{
    border-color: var(--light-warning) !important;
}
.bg-light-warning-hover:hover{
    background-color: var(--light-warning) !important;
}
.text-light-warning-hover:hover{
    color: var(--light-warning) !important;
}
.btn.btn-outline-light-warning {
    color: var(--light-warning);
    background-color: #ffffff;
    border-color: var(--light-warning);
}
.btn.btn-outline-light-warning:hover,
.btn.btn-outline-light-warning:active,
.btn.btn-outline-light-warning:focus,
.btn.btn-outline-light-warning.active {
    background: var(--light-warning);
    color: #ffffff;
    border-color: var(--light-warning);
}
.btn.btn-light-warning {
    color: #fff;
    background-color: var(--light-warning);
    border-color: var(--light-warning);
}
.btn.btn-light-warning:hover,
.btn.btn-light-warning:active,
.btn.btn-light-warning:focus,
.btn.btn-light-warning.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-warning{
    background-color: var(--extra-light-warning) !important;
}
.text-extra-light-warning{
    color: var(--extra-light-warning) !important;
}
[class~="border-dashed"].border-extra-light-warning, [class~="border-dotted"].border-extra-light-warning, [class~="border"].border-extra-light-warning{
    border-color: var(--extra-light-warning) !important;
}
[class~="border-dashed"].border-extra-light-warning-hover:hover, [class~="border-dotted"].border-extra-light-warning-hover:hover, [class~="border"].border-extra-light-warning-hover:hover{
    border-color: var(--extra-light-warning) !important;
}
.bg-extra-light-warning-hover:hover{
    background-color: var(--extra-light-warning) !important;
}
.text-extra-light-warning-hover:hover{
    color: var(--extra-light-warning) !important;
}
.btn.btn-outline-extra-light-warning {
    color: var(--extra-light-warning);
    background-color: #ffffff;
    border-color: var(--extra-light-warning);
}
.btn.btn-outline-extra-light-warning:hover,
.btn.btn-outline-extra-light-warning:active,
.btn.btn-outline-extra-light-warning:focus,
.btn.btn-outline-extra-light-warning.active {
    background: var(--extra-light-warning);
    color: #ffffff;
    border-color: var(--extra-light-warning);
}
.btn.btn-extra-light-warning {
    color: #fff;
    background-color: var(--extra-light-warning);
    border-color: var(--extra-light-warning);
}
.btn.btn-extra-light-warning:hover,
.btn.btn-extra-light-warning:active,
.btn.btn-extra-light-warning:focus,
.btn.btn-extra-light-warning.active {
    filter: brightness(80%);
    color: white;
}

/* Purple */
.bg-dark-purple{
    background-color: var(--dark-purple) !important;
}
.text-dark-purple{
    color: var(--dark-purple) !important;
}
[class~="border-dashed"].border-dark-purple, [class~="border-dotted"].border-dark-purple, [class~="border"].border-dark-purple{
    border-color: var(--dark-purple) !important;
}
[class~="border-dashed"].border-dark-purple-hover:hover, [class~="border-dotted"].border-dark-purple-hover:hover, [class~="border"].border-dark-purple-hover:hover{
    border-color: var(--dark-purple) !important;
}
.bg-dark-purple-hover:hover{
    background-color: var(--dark-purple) !important;
}
.text-dark-purple-hover:hover{
    color: var(--dark-purple) !important;
}
.btn.btn-outline-dark-purple {
    color: var(--dark-purple);
    background-color: #ffffff;
    border-color: var(--dark-purple);
}
.btn.btn-outline-dark-purple:hover,
.btn.btn-outline-dark-purple:active,
.btn.btn-outline-dark-purple:focus,
.btn.btn-outline-dark-purple.active {
    background: var(--dark-purple);
    color: #ffffff;
    border-color: var(--dark-purple);
}
.btn.btn-dark-purple {
    color: #fff;
    background-color: var(--dark-purple);
    border-color: var(--dark-purple);
}
.btn.btn-dark-purple:hover,
.btn.btn-dark-purple:active,
.btn.btn-dark-purple:focus,
.btn.btn-dark-purple.active {
    filter: brightness(80%);
    color: white;
}
.bg-primary-purple{
    background-color: var(--primary-purple) !important;
}
.text-primary-purple{
    color: var(--primary-purple) !important;
}
[class~="border-dashed"].border-primary-purple, [class~="border-dotted"].border-primary-purple, [class~="border"].border-primary-purple{
    border-color: var(--primary-purple) !important;
}
[class~="border-dashed"].border-primary-purple-hover:hover, [class~="border-dotted"].border-primary-purple-hover:hover, [class~="border"].border-primary-purple-hover:hover{
    border-color: var(--primary-purple) !important;
}
.bg-primary-purple-hover:hover{
    background-color: var(--primary-purple) !important;
}
.text-primary-purple-hover:hover{
    color: var(--primary-purple) !important;
}
.btn.btn-outline-primary-purple {
    color: var(--primary-purple);
    background-color: #ffffff;
    border-color: var(--primary-purple);
}
.btn.btn-outline-primary-purple:hover,
.btn.btn-outline-primary-purple:active,
.btn.btn-outline-primary-purple:focus,
.btn.btn-outline-primary-purple.active {
    background: var(--primary-purple);
    color: #ffffff;
    border-color: var(--primary-purple);
}
.btn.btn-primary-purple {
    color: #fff;
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
}
.btn.btn-primary-purple:hover,
.btn.btn-primary-purple:active,
.btn.btn-primary-purple:focus,
.btn.btn-primary-purple.active {
    filter: brightness(80%);
    color: white;
}
.bg-light-purple{
    background-color: var(--light-purple) !important;
}
.text-light-purple{
    color: var(--light-purple) !important;
}
[class~="border-dashed"].border-light-purple, [class~="border-dotted"].border-light-purple, [class~="border"].border-light-purple{
    border-color: var(--light-purple) !important;
}
[class~="border-dashed"].border-light-purple-hover:hover, [class~="border-dotted"].border-light-purple-hover:hover, [class~="border"].border-light-purple-hover:hover{
    border-color: var(--light-purple) !important;
}
.bg-light-purple-hover:hover{
    background-color: var(--light-purple) !important;
}
.text-light-purple-hover:hover{
    color: var(--light-purple) !important;
}
.btn.btn-outline-light-purple {
    color: var(--light-purple);
    background-color: #ffffff;
    border-color: var(--light-purple);
}
.btn.btn-outline-light-purple:hover,
.btn.btn-outline-light-purple:active,
.btn.btn-outline-light-purple:focus,
.btn.btn-outline-light-purple.active {
    background: var(--light-purple);
    color: #ffffff;
    border-color: var(--light-purple);
}
.btn.btn-light-purple {
    color: #fff;
    background-color: var(--light-purple);
    border-color: var(--light-purple);
}
.btn.btn-light-purple:hover,
.btn.btn-light-purple:active,
.btn.btn-light-purple:focus,
.btn.btn-light-purple.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-purple{
    background-color: var(--extra-light-purple) !important;
}
.text-extra-light-purple{
    color: var(--extra-light-purple) !important;
}
[class~="border-dashed"].border-extra-light-purple, [class~="border-dotted"].border-extra-light-purple, [class~="border"].border-extra-light-purple{
    border-color: var(--extra-light-purple) !important;
}
[class~="border-dashed"].border-extra-light-purple-hover:hover, [class~="border-dotted"].border-extra-light-purple-hover:hover, [class~="border"].border-extra-light-purple-hover:hover{
    border-color: var(--extra-light-purple) !important;
}
.bg-extra-light-purple-hover:hover{
    background-color: var(--extra-light-purple) !important;
}
.text-extra-light-purple-hover:hover{
    color: var(--extra-light-purple) !important;
}
.btn.btn-outline-extra-light-purple {
    color: var(--extra-light-purple);
    background-color: #ffffff;
    border-color: var(--extra-light-purple);
}
.btn.btn-outline-extra-light-purple:hover,
.btn.btn-outline-extra-light-purple:active,
.btn.btn-outline-extra-light-purple:focus,
.btn.btn-outline-extra-light-purple.active {
    background: var(--extra-light-purple);
    color: #ffffff;
    border-color: var(--extra-light-purple);
}
.btn.btn-extra-light-purple {
    color: #fff;
    background-color: var(--extra-light-purple);
    border-color: var(--extra-light-purple);
}
.btn.btn-extra-light-purple:hover,
.btn.btn-extra-light-purple:active,
.btn.btn-extra-light-purple:focus,
.btn.btn-extra-light-purple.active {
    filter: brightness(80%);
    color: white;
}

/* Cyan */
.bg-dark-cyan{
    background-color: var(--dark-cyan) !important;
}
.text-dark-cyan{
    color: var(--dark-cyan) !important;
}
[class~="border-dashed"].border-dark-cyan, [class~="border-dotted"].border-dark-cyan, [class~="border"].border-dark-cyan{
    border-color: var(--dark-cyan) !important;
}
[class~="border-dashed"].border-dark-cyan-hover:hover, [class~="border-dotted"].border-dark-cyan-hover:hover, [class~="border"].border-dark-cyan-hover:hover{
    border-color: var(--dark-cyan) !important;
}
.bg-dark-cyan-hover:hover{
    background-color: var(--dark-cyan) !important;
}
.text-dark-cyan-hover:hover{
    color: var(--dark-cyan) !important;
}
.btn.btn-outline-dark-cyan {
    color: var(--dark-cyan);
    background-color: #ffffff;
    border-color: var(--dark-cyan);
}
.btn.btn-outline-dark-cyan:hover,
.btn.btn-outline-dark-cyan:active,
.btn.btn-outline-dark-cyan:focus,
.btn.btn-outline-dark-cyan.active {
    background: var(--dark-cyan);
    color: #ffffff;
    border-color: var(--dark-cyan);
}
.btn.btn-dark-cyan {
    color: #fff;
    background-color: var(--dark-cyan);
    border-color: var(--dark-cyan);
}
.btn.btn-dark-cyan:hover,
.btn.btn-dark-cyan:active,
.btn.btn-dark-cyan:focus,
.btn.btn-dark-cyan.active {
    filter: brightness(80%);
    color: white;
}
.bg-primary-cyan{
    background-color: var(--primary-cyan) !important;
}
.text-primary-cyan{
    color: var(--primary-cyan) !important;
}
[class~="border-dashed"].border-primary-cyan, [class~="border-dotted"].border-primary-cyan, [class~="border"].border-primary-cyan{
    border-color: var(--primary-cyan) !important;
}
[class~="border-dashed"].border-primary-cyan-hover:hover, [class~="border-dotted"].border-primary-cyan-hover:hover, [class~="border"].border-primary-cyan-hover:hover{
    border-color: var(--primary-cyan) !important;
}
.bg-primary-cyan-hover:hover{
    background-color: var(--primary-cyan) !important;
}
.text-primary-cyan-hover:hover{
    color: var(--primary-cyan) !important;
}
.btn.btn-outline-primary-cyan {
    color: var(--primary-cyan);
    background-color: #ffffff;
    border-color: var(--primary-cyan);
}
.btn.btn-outline-primary-cyan:hover,
.btn.btn-outline-primary-cyan:active,
.btn.btn-outline-primary-cyan:focus,
.btn.btn-outline-primary-cyan.active {
    background: var(--primary-cyan);
    color: #ffffff;
    border-color: var(--primary-cyan);
}
.btn.btn-primary-cyan {
    color: #fff;
    background-color: var(--primary-cyan);
    border-color: var(--primary-cyan);
}
.btn.btn-primary-cyan:hover,
.btn.btn-primary-cyan:active,
.btn.btn-primary-cyan:focus,
.btn.btn-primary-cyan.active {
    filter: brightness(80%);
    color: white;
}
.bg-light-cyan{
    background-color: var(--light-cyan) !important;
}
.text-light-cyan{
    color: var(--light-cyan) !important;
}
[class~="border-dashed"].border-light-cyan, [class~="border-dotted"].border-light-cyan, [class~="border"].border-light-cyan{
    border-color: var(--light-cyan) !important;
}
[class~="border-dashed"].border-light-cyan-hover:hover, [class~="border-dotted"].border-light-cyan-hover:hover, [class~="border"].border-light-cyan-hover:hover{
    border-color: var(--light-cyan) !important;
}
.bg-light-cyan-hover:hover{
    background-color: var(--light-cyan) !important;
}
.text-light-cyan-hover:hover{
    color: var(--light-cyan) !important;
}
.btn.btn-outline-light-cyan {
    color: var(--light-cyan);
    background-color: #ffffff;
    border-color: var(--light-cyan);
}
.btn.btn-outline-light-cyan:hover,
.btn.btn-outline-light-cyan:active,
.btn.btn-outline-light-cyan:focus,
.btn.btn-outline-light-cyan.active {
    background: var(--light-cyan);
    color: #ffffff;
    border-color: var(--light-cyan);
}
.btn.btn-light-cyan {
    color: #fff;
    background-color: var(--light-cyan);
    border-color: var(--light-cyan);
}
.btn.btn-light-cyan:hover,
.btn.btn-light-cyan:active,
.btn.btn-light-cyan:focus,
.btn.btn-light-cyan.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-cyan{
    background-color: var(--extra-light-cyan) !important;
}
.text-extra-light-cyan{
    color: var(--extra-light-cyan) !important;
}
[class~="border-dashed"].border-extra-light-cyan, [class~="border-dotted"].border-extra-light-cyan, [class~="border"].border-extra-light-cyan{
    border-color: var(--extra-light-cyan) !important;
}
[class~="border-dashed"].border-extra-light-cyan-hover:hover, [class~="border-dotted"].border-extra-light-cyan-hover:hover, [class~="border"].border-extra-light-cyan-hover:hover{
    border-color: var(--extra-light-cyan) !important;
}
.bg-extra-light-cyan-hover:hover{
    background-color: var(--extra-light-cyan) !important;
}
.text-extra-light-cyan-hover:hover{
    color: var(--extra-light-cyan) !important;
}
.btn.btn-outline-extra-light-cyan {
    color: var(--extra-light-cyan);
    background-color: #ffffff;
    border-color: var(--extra-light-cyan);
}
.btn.btn-outline-extra-light-cyan:hover,
.btn.btn-outline-extra-light-cyan:active,
.btn.btn-outline-extra-light-cyan:focus,
.btn.btn-outline-extra-light-cyan.active {
    background: var(--extra-light-cyan);
    color: #ffffff;
    border-color: var(--extra-light-cyan);
}
.btn.btn-extra-light-cyan {
    color: #fff;
    background-color: var(--extra-light-cyan);
    border-color: var(--extra-light-cyan);
}
.btn.btn-extra-light-cyan:hover,
.btn.btn-extra-light-cyan:active,
.btn.btn-extra-light-cyan:focus,
.btn.btn-extra-light-cyan.active {
    filter: brightness(80%);
    color: white;
}

/* Green */
.bg-dark-green{
    background-color: var(--dark-green) !important;
}
.text-dark-green{
    color: var(--dark-green) !important;
}
[class~="border-dashed"].border-dark-green, [class~="border-dotted"].border-dark-green, [class~="border"].border-dark-green{
    border-color: var(--dark-green) !important;
}
[class~="border-dashed"].border-dark-green-hover:hover, [class~="border-dotted"].border-dark-green-hover:hover, [class~="border"].border-dark-green-hover:hover{
    border-color: var(--dark-green) !important;
}
.bg-dark-green-hover:hover{
    background-color: var(--dark-green) !important;
}
.text-dark-green-hover:hover{
    color: var(--dark-green) !important;
}
.btn.btn-outline-dark-green {
    color: var(--dark-green);
    background-color: #ffffff;
    border-color: var(--dark-green);
}
.btn.btn-outline-dark-green:hover,
.btn.btn-outline-dark-green:active,
.btn.btn-outline-dark-green:focus,
.btn.btn-outline-dark-green.active {
    background: var(--dark-green);
    color: #ffffff;
    border-color: var(--dark-green);
}
.btn.btn-dark-green {
    color: #fff;
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}
.btn.btn-dark-green:hover,
.btn.btn-dark-green:active,
.btn.btn-dark-green:focus,
.btn.btn-dark-green.active {
    filter: brightness(80%);
    color: white;
}
.bg-primary-green{
    background-color: var(--primary-green) !important;
}
.text-primary-green{
    color: var(--primary-green) !important;
}
[class~="border-dashed"].border-primary-green, [class~="border-dotted"].border-primary-green, [class~="border"].border-primary-green{
    border-color: var(--primary-green) !important;
}
[class~="border-dashed"].border-primary-green-hover:hover, [class~="border-dotted"].border-primary-green-hover:hover, [class~="border"].border-primary-green-hover:hover{
    border-color: var(--primary-green) !important;
}
.bg-primary-green-hover:hover{
    background-color: var(--primary-green) !important;
}
.text-primary-green-hover:hover{
    color: var(--primary-green) !important;
}
.btn.btn-outline-primary-green {
    color: var(--primary-green);
    background-color: #ffffff;
    border-color: var(--primary-green);
}
.btn.btn-outline-primary-green:hover,
.btn.btn-outline-primary-green:active,
.btn.btn-outline-primary-green:focus,
.btn.btn-outline-primary-green.active {
    background: var(--primary-green);
    color: #ffffff;
    border-color: var(--primary-green);
}
.btn.btn-primary-green {
    color: #fff;
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}
.btn.btn-primary-green:hover,
.btn.btn-primary-green:active,
.btn.btn-primary-green:focus,
.btn.btn-primary-green.active {
    filter: brightness(80%);
    color: white;
}
.bg-light-green{
    background-color: var(--light-green) !important;
}
.text-light-green{
    color: var(--light-green) !important;
}
[class~="border-dashed"].border-light-green, [class~="border-dotted"].border-light-green, [class~="border"].border-light-green{
    border-color: var(--light-green) !important;
}
[class~="border-dashed"].border-light-green-hover:hover, [class~="border-dotted"].border-light-green-hover:hover, [class~="border"].border-light-green-hover:hover{
    border-color: var(--light-green) !important;
}
.bg-light-green-hover:hover{
    background-color: var(--light-green) !important;
}
.text-light-green-hover:hover{
    color: var(--light-green) !important;
}
.btn.btn-outline-light-green {
    color: var(--light-green);
    background-color: #ffffff;
    border-color: var(--light-green);
}
.btn.btn-outline-light-green:hover,
.btn.btn-outline-light-green:active,
.btn.btn-outline-light-green:focus,
.btn.btn-outline-light-green.active {
    background: var(--light-green);
    color: #ffffff;
    border-color: var(--light-green);
}
.btn.btn-light-green {
    color: #fff;
    background-color: var(--light-green);
    border-color: var(--light-green);
}
.btn.btn-light-green:hover,
.btn.btn-light-green:active,
.btn.btn-light-green:focus,
.btn.btn-light-green.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-green{
    background-color: var(--extra-light-green) !important;
}
.text-extra-light-green{
    color: var(--extra-light-green) !important;
}
[class~="border-dashed"].border-extra-light-green, [class~="border-dotted"].border-extra-light-green, [class~="border"].border-extra-light-green{
    border-color: var(--extra-light-green) !important;
}
[class~="border-dashed"].border-extra-light-green-hover:hover, [class~="border-dotted"].border-extra-light-green-hover:hover, [class~="border"].border-extra-light-green-hover:hover{
    border-color: var(--extra-light-green) !important;
}
.bg-extra-light-green-hover:hover{
    background-color: var(--extra-light-green) !important;
}
.text-extra-light-green-hover:hover{
    color: var(--extra-light-green) !important;
}
.btn.btn-outline-extra-light-green {
    color: var(--extra-light-green);
    background-color: #ffffff;
    border-color: var(--extra-light-green);
}
.btn.btn-outline-extra-light-green:hover,
.btn.btn-outline-extra-light-green:active,
.btn.btn-outline-extra-light-green:focus,
.btn.btn-outline-extra-light-green.active {
    background: var(--extra-light-green);
    color: #ffffff;
    border-color: var(--extra-light-green);
}
.btn.btn-extra-light-green {
    color: #fff;
    background-color: var(--extra-light-green);
    border-color: var(--extra-light-green);
}
.btn.btn-extra-light-green:hover,
.btn.btn-extra-light-green:active,
.btn.btn-extra-light-green:focus,
.btn.btn-extra-light-green.active {
    filter: brightness(80%);
    color: white;
}

/* Orange */
.bg-dark-orange{
    background-color: var(--dark-orange) !important;
}
.text-dark-orange{
    color: var(--dark-orange) !important;
}
[class~="border-dashed"].border-dark-orange, [class~="border-dotted"].border-dark-orange, [class~="border"].border-dark-orange{
    border-color: var(--dark-orange) !important;
}
[class~="border-dashed"].border-dark-orange-hover:hover, [class~="border-dotted"].border-dark-orange-hover:hover, [class~="border"].border-dark-orange-hover:hover{
    border-color: var(--dark-orange) !important;
}
.bg-dark-orange-hover:hover{
    background-color: var(--dark-orange) !important;
}
.text-dark-orange-hover:hover{
    color: var(--dark-orange) !important;
}
.btn.btn-outline-dark-orange {
    color: var(--dark-orange);
    background-color: #ffffff;
    border-color: var(--dark-orange);
}
.btn.btn-outline-dark-orange:hover,
.btn.btn-outline-dark-orange:active,
.btn.btn-outline-dark-orange:focus,
.btn.btn-outline-dark-orange.active {
    background: var(--dark-orange);
    color: #ffffff;
    border-color: var(--dark-orange);
}
.btn.btn-dark-orange {
    color: #fff;
    background-color: var(--dark-orange);
    border-color: var(--dark-orange);
}
.btn.btn-dark-orange:hover,
.btn.btn-dark-orange:active,
.btn.btn-dark-orange:focus,
.btn.btn-dark-orange.active {
    filter: brightness(80%);
    color: white;
}
.bg-primary-orange{
    background-color: var(--primary-orange) !important;
}
.text-primary-orange{
    color: var(--primary-orange) !important;
}
[class~="border-dashed"].border-primary-orange, [class~="border-dotted"].border-primary-orange, [class~="border"].border-primary-orange{
    border-color: var(--primary-orange) !important;
}
[class~="border-dashed"].border-primary-orange-hover:hover, [class~="border-dotted"].border-primary-orange-hover:hover, [class~="border"].border-primary-orange-hover:hover{
    border-color: var(--primary-orange) !important;
}
.bg-primary-orange-hover:hover{
    background-color: var(--primary-orange) !important;
}
.text-primary-orange-hover:hover{
    color: var(--primary-orange) !important;
}
.btn.btn-outline-primary-orange {
    color: var(--primary-orange);
    background-color: #ffffff;
    border-color: var(--primary-orange);
}
.btn.btn-outline-primary-orange:hover,
.btn.btn-outline-primary-orange:active,
.btn.btn-outline-primary-orange:focus,
.btn.btn-outline-primary-orange.active {
    background: var(--primary-orange);
    color: #ffffff;
    border-color: var(--primary-orange);
}
.btn.btn-primary-orange {
    color: #fff;
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}
.btn.btn-primary-orange:hover,
.btn.btn-primary-orange:active,
.btn.btn-primary-orange:focus,
.btn.btn-primary-orange.active {
    filter: brightness(80%);
    color: white;
}
.bg-light-orange{
    background-color: var(--light-orange) !important;
}
.text-light-orange{
    color: var(--light-orange) !important;
}
[class~="border-dashed"].border-light-orange, [class~="border-dotted"].border-light-orange, [class~="border"].border-light-orange{
    border-color: var(--light-orange) !important;
}
[class~="border-dashed"].border-light-orange-hover:hover, [class~="border-dotted"].border-light-orange-hover:hover, [class~="border"].border-light-orange-hover:hover{
    border-color: var(--light-orange) !important;
}
.bg-light-orange-hover:hover{
    background-color: var(--light-orange) !important;
}
.text-light-orange-hover:hover{
    color: var(--light-orange) !important;
}
.btn.btn-outline-light-orange {
    color: var(--light-orange);
    background-color: #ffffff;
    border-color: var(--light-orange);
}
.btn.btn-outline-light-orange:hover,
.btn.btn-outline-light-orange:active,
.btn.btn-outline-light-orange:focus,
.btn.btn-outline-light-orange.active {
    background: var(--light-orange);
    color: #ffffff;
    border-color: var(--light-orange);
}
.btn.btn-light-orange {
    color: #fff;
    background-color: var(--light-orange);
    border-color: var(--light-orange);
}
.btn.btn-light-orange:hover,
.btn.btn-light-orange:active,
.btn.btn-light-orange:focus,
.btn.btn-light-orange.active {
    filter: brightness(80%);
    color: white;
}
.bg-extra-light-orange{
    background-color: var(--extra-light-orange) !important;
}
.text-extra-light-orange{
    color: var(--extra-light-orange) !important;
}
[class~="border-dashed"].border-extra-light-orange, [class~="border-dotted"].border-extra-light-orange, [class~="border"].border-extra-light-orange{
    border-color: var(--extra-light-orange) !important;
}
[class~="border-dashed"].border-extra-light-orange-hover:hover, [class~="border-dotted"].border-extra-light-orange-hover:hover, [class~="border"].border-extra-light-orange-hover:hover{
    border-color: var(--extra-light-orange) !important;
}
.bg-extra-light-orange-hover:hover{
    background-color: var(--extra-light-orange) !important;
}
.text-extra-light-orange-hover:hover{
    color: var(--extra-light-orange) !important;
}
.btn.btn-outline-extra-light-orange {
    color: var(--extra-light-orange);
    background-color: #ffffff;
    border-color: var(--extra-light-orange);
}
.btn.btn-outline-extra-light-orange:hover,
.btn.btn-outline-extra-light-orange:active,
.btn.btn-outline-extra-light-orange:focus,
.btn.btn-outline-extra-light-orange.active {
    background: var(--extra-light-orange);
    color: #ffffff;
    border-color: var(--extra-light-orange);
}
.btn.btn-extra-light-orange {
    color: #fff;
    background-color: var(--extra-light-orange);
    border-color: var(--extra-light-orange);
}
.btn.btn-extra-light-orange:hover,
.btn.btn-extra-light-orange:active,
.btn.btn-extra-light-orange:focus,
.btn.btn-extra-light-orange.active {
    filter: brightness(80%);
    color: white;
}