.primary-bg{
    background-color: #0066cc;
}

.primary-dark-bg{
    background-color: #16324d;
}

.accent-bg{
    background-color: #0bd9d2;
}

.analogue-bg{
    background-color: #6b65e0;
}

.neutral-light-bg{
    background-color: #f2f7fc;
}

.neutral-bg{
    background-color: #e6ecf2;
}

.neutral-dark-bg{
    background-color: #959da6;
}

.wcag-grey-bg {
    background-color: #48505D;
}

.wcag-red-bg {
    background-color: #C11C34;
}

.wcag-pink-bg {
    background-color: #A80083;
}

.wcag-violet-bg {
    background-color: #7023B7;
}

.wcag-purple-bg {
    background-color: #6500FD;
}

.wcag-blue3-bg {
    background-color: #5619FF;
}

.wcag-blue2-bg {
    background-color: #0044E6;
}

.wcag-blue-bg {
    background-color: #1565C0;
}

.wcag-green2-bg {
    background-color: #006462;
}

.wcag-green-bg {
    background-color: #2E7D32;
}

.wcag-brown-bg {
    background-color: #6C543F;
}

.wcag-brown2-bg {
    background-color: #7C4F00;
}

.color-choices {
    padding: 2px;
}

.color-chooser-btn {
    padding: 16px;
    border-width: 4px 0px;
    border-style: solid;
    border-color: #FFF;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.color-chooser-btn.active {
    border: 4px solid #ffdb00;
}

.color-chooser-btn.none::before {
    content: "";
    background-color: red;
    width: 48px;
    height: 2px;
    position: absolute;
    top: 15px;
    left: -8px;
    -webkit-transform: rotate(45deg);

}

.red {
    background-color: #d1344c;
}
.purple {
  background-color: #b21dd0;
}
.green {
  background-color: #0e8a5f;
}
.blue {
  background-color: #0d00ff;
}
.yellow {
  background-color: #ffcc00;
}