/*Colour utility classes*/
.c-primary {
    color: var(--primary-colour);
}

.c-primary-light {
    color: var(--primary-light-colour)
}

.c-secondary {
    color: var(--secondary-colour);
}

.c-white {
    color: var(--white-colour);
}

.c-error {
    color: var(--error-colour);
}

.c-warning {
    color: var(--warning-colour);
}

.c-success {
    color: var(--success-colour);
}

.c-overlay {
    color: var(--overlay-colour);
    opacity: 45%;
}

.c-cg10 {
    color: var(--coolgrey10-colour);
}

.c-cg20 {
    color: var(--coolgrey20-colour);
}

.c-cg30 {
    color: var(--coolgrey30-colour);
}

.c-cg40 {
    color: var(--coolgrey40-colour);
}

.c-cg50 {
    color: var(--coolgrey50-colour);
}

.c-cg60 {
    color: var(--coolgrey60-colour);
}

.c-cg70 {
    color: var(--coolgrey70-colour);
}

.c-cg80 {
    color: var(--coolgrey80-colour);
}

.c-cg90 {
    color: var(--coolgrey90-colour);
}

.c-cg100 {
    color: var(--coolgrey100-colour);
}

/*Background colour*/
.bc-primary {
    background-color: var(--primary-colour);
}

.bc-secondary {
    background-color: var(--secondary-colour);
}

.bc-white {
    background-color: var(--white-colour);
}

.bc-error {
    background-color: var(--error-colour);
}

.bc-warning {
    background-color: var(--warning-colour);
}

.bc-success {
    background-color: var(--success-colour);
}

.bc-overlay {
    background-color: var(--overlay-colour);
    opacity: 45%;
}

.bc-cg10 {
    background-color: var(--coolgrey10-colour);
}

.bc-cg20 {
    background-color: var(--coolgrey20-colour);
}

.bc-cg30 {
    background-color: var(--coolgrey30-colour);
}

.bc-cg40 {
    background-color: var(--coolgrey40-colour);
}

.bc-cg50 {
    background-color: var(--coolgrey50-colour);
}

.bc-cg60 {
    background-color: var(--coolgrey60-colour);
}

.bc-cg70 {
    background-color: var(--coolgrey70-colour);
}

.bc-cg80 {
    background-color: var(--coolgrey80-colour);
}

.bc-cg90 {
    background-color: var(--coolgrey90-colour);
}

.bc-cg100 {
    background-color: var(--coolgrey100-colour);
}

/* Banner colour variants */
.info-banner {
    background-color: var(--active-nav-colour);
    border-color: var(--primary-colour);
    color: var(--primary-colour);
}

.warning-banner {
    background-color: #FEF9E6;
    border-color: var(--warning-colour);
    color: var(--warning-colour);
}

.alert-banner {
    background-color: #FFF0F1;
    border-color: var(--error-colour);
    color: var(--error-colour);
}

.success-banner {
    background-color: #F0FBF4;
    border-color: var(--success-colour);
    color: var(--success-colour);
}