.bg-basecol,
a.bg-basecol,
.btn.bg-basecol {
    background: var(--col-basecol);
    background-color: var(--col-basecol);
}

.bg-black,
a.bg-black,
.btn.bg-black {
    background: var(--col-black);
    background-color: var(--col-black);
}

.bg-blue,
a.bg-blue,
.btn.bg-blue {
    background: var(--col-blue);
    background-color: var(--col-blue);
}

.bg-mblue,
a.bg-mblue,
.btn.bg-mblue {
    background: var(--col-mblue);
    background-color: var(--col-mblue);
}

.bg-lblue,
a.bg-lblue,
.btn.bg-lblue {
    background: var(--col-lblue);
    background-color: var(--col-lblue);
}

.bg-green,
a.bg-green,
.btn.bg-green {
    background: var(--col-green);
    background-color: var(--col-green);
}

.bg-lgreen,
a.bg-lgreen,
.btn.bg-lgreen {
    background: var(--col-lgreen);
    background-color: var(--col-lgreen);
}

.bg-purple,
a.bg-purple,
.btn.bg-purple {
    background: var(--col-purple);
    background-color: var(--col-purple);
}

.bg-lpurple,
a.bg-lpurple,
.btn.bg-lpurple {
    background: var(--col-lpurple);
    background-color: var(--col-lpurple);
}

.bg-grey,
a.bg-grey,
.btn.bg-grey {
    background: var(--col-grey);
    background-color: var(--col-grey);
}

.bg-lgrey,
a.bg-lgrey,
.btn.bg-lgrey {
    background: var(--col-lgrey);
    background-color: var(--col-lgrey);
}

.bg-red,
a.bg-red,
.btn.bg-red {
    background: var(--col-red);
    background-color: var(--col-red);
}

.bg-lred,
a.bg-lred,
.btn.bg-lred {
    background: var(--col-lred);
    background-color: var(--col-lred);
}

.bg-orange,
a.bg-orange,
.btn.bg-orange {
    background: var(--col-orange);
    background-color: var(--col-orange);
}

.bg-lorange,
a.bg-lorange,
.btn.bg-lorange {
    background: var(--col-lorange);
    background-color: var(--col-lorange);
}

.bg-dgreen,
a.bg-dgreen,
.btn.bg-dgreen {
    background: var(--col-dgreen);
    background-color: var(--col-dgreen);
}

.bg-teal,
a.bg-teal,
.btn.bg-teal {
    background: var(--col-teal);
    background-color: var(--col-teal);
}

.bg-lilac,
a.bg-lilac,
.btn.bg-lilac {
    background: var(--col-lilac);
    background-color: var(--col-lilac);
}

.bg-grey,
a.bg-grey,
.btn.bg-grey {
    background: var(--col-grey);
    background-color: var(--col-grey);
}

.bg-pink,
a.bg-pink,
.btn.bg-pink {
    background: var(--col-pink);
    background-color: var(--col-pink);
}

.bg-dpink,
a.bg-dpink,
.btn.bg-dpink {
    background: var(--col-dpink);
    background-color: var(--col-dpink);
}

.bg-lpink,
a.bg-lpink,
.btn.bg-lpink {
    background: var(--col-lpink);
    background-color: var(--col-lpink);
}

.bg-gold,
a.bg-gold,
.btn.bg-gold {
    background: var(--col-gold);
    background-color: var(--col-gold);
}

.bg-burg,
a.bg-burg,
.btn.bg-burg {
    background: var(--col-burg);
    background-color: var(--col-burg);
}

.bg-lburg,
a.bg-lburg,
.btn.bg-lburg {
    background: var(--col-lburg);
    background-color: var(--col-lburg);
}

.bg-dburg,
a.bg-dburg,
.btn.bg-dburg {
    background: var(--col-dburg);
    background-color: var(--col-dburg);
}

a[class*="bg"]:hover,
a:has([class*="bg"]):hover,
.btn[class*="bg"]:hover {
    background: #f3f3f3 !important;
    background-color: #f3f3f3 !important;
    color: #3d3d3d !important;
}

.col-basecol,
a.col-basecol {
    color: var(--col-basecol);
}

.col-black,
a.col-black {
    color: var(--col-black);
}

.col-blue,
a.col-blue {
    color: var(--col-blue);
}

.col-mblue,
a.col-mblue {
    color: var(--col-mblue);
}

.col-lblue,
a.col-lblue {
    color: var(--col-lblue);
}

.col-green,
a.col-green {
    color: var(--col-green);
}

.col-lgreen,
a.col-lgreen {
    color: var(--col-lgreen);
}

.col-purple,
a.col-purple {
    color: var(--col-purple);
}

.col-lpurple,
a.col-lpurple {
    color: var(--col-lpurple);
}

.col-grey,
a.col-grey {
    color: var(--col-grey);
}

.col-red,
a.col-red {
    color: var(--col-red);
}

.lcol-red,
a.lcol-red {
    color: var(--col-lred);
}

.col-white,
a.col-white {
    color: var(--col-white);
}

.col-orange,
a.col-orange {
    color: var(--col-orange);
}

.col-dgreen,
a.col-dgreen {
    color: var(--col-dgreen);
}

.col-teal,
a.col-teal {
    color: var(--col-teal);
}

.col-lilac,
a.col-lilac {
    color: var(--col-lilac);
}

.col-grey,
a.col-grey {
    color: var(--col-grey);
}

.col-pink,
a.col-pink {
    color: var(--col-pink);
}

.col-gold,
a.col-gold {
    color: var(--col-gold);
}

.col-burg,
a.col-burg {
    color: var(--col-burg);
}

.col-lburg,
a.col-lburg {
    color: var(--col-lburg);
}

.col-dburg,
a.col-dburg {
    color: var(--col-dburg);
}

.btn.bg-basecol {
    border: 1px solid var(--col-basecol);
}

.btn.bg-black {
    border: 1px solid var(--col-black);
}

.btn.bg-blue {
    border: 1px solid var(--col-dblue);
}

.btn.bg-mblue {
    border: 1px solid var(--col-blue);
}

.btn.bg-lblue {
    border: 1px solid var(--col-mblue);
}

.btn.bg-green {
    border: 1px solid var(--col-dgreen);
}

.btn.bg-lgreen {
    border: 1px solid var(--col-green);
}

.btn.bg-purple {
    border: 1px solid var(--col-dpurple);
}

.btn.bg-lpurple {
    border: 1px solid var(--col-purple);
}

.btn.bg-grey {
    border: 1px solid var(--col-black);
}

.btn.bg-lgrey {
    border: 1px solid var(--col-grey);
}

.btn.bg-red {
    border: 1px solid var(--col-dred);
}

.btn.bg-lred {
    border: 1px solid var(--col-red);
}

.btn.bg-white {
    border: 1px solid var(--col-grey);
}

.btn.bg-orange {
    border: 1px solid var(--col-dorange);
}

.btn.bg-dgreen {
    border: 1px solid var(--col-green);
}

.btn.bg-teal {
    border: 1px solid var(--col-dteal);
}

.btn.bg-lilac {
    border: 1px solid var(--col-dlilac);
}

.btn.bg-pink {
    border: 1px solid var(--col-dpink);
}

.btn.bg-gold {
    border: 1px solid var(--col-dgold);
}
.btn.bg-burg {
    border: 1px solid var(--col-dburg);
}
.btn.bg-lburg {
    border: 1px solid var(--col-burg);
}