/* Custom colorpalette add */
:root {
    --color-charcoal: #ccc;
    --color-red: #ff0000;
    --color-white: #FFF;
    --color-orange: #FF6600;
    --color-green: #339933;
    --color-blue: #3366cc;
    --color-light-blue: #3399cc;
    --color-light-green: #99cc33;
    --color-yellow: #ffcc00;
}
/* text */
.has-charcoal-color {
    color: var(--color-charcoal);
}
.has-red-color {
    color: var(--color-red);
}
.has-white-color {
    color: var(--color-white);
}
.has-orange-color {
    color: var(--color-orange);
}
.has-green-color {
    color: var(--color-green);
}
.has-blue-color {
    color: var(--color-blue);
}
.has-light-blue-color {
    color: var(--color-light-blue);
}
.has-light-green-color {
    color: var(--color-light-green);
}
.has-yellow-color {
    color: var(--color-yellow);
}
/* background */
.has-charcoal-background-color {
    background-color: var(--color-charcoal);
}
.has-red-background-color {
    background-color: var(--color-red);
}
.has-white-background-color {
    background-color: var(--color-white);
}
.has-orange-background-color {
    background-color: var(--color-orange);
}
.has-green-background-color {
    background-color: var(--color-green);
}
.has-blue-background-color {
    background-color: var(--color-blue);
}
.has-light-blue-background-color {
    background-color: var(--color-light-blue);
}
.has-light-green-background-color {
    color: var(--color-light-green);
}
.has-yellow-background-color {
    background-color: var(--color-yellow);
}