/*  --------------------------------------------------------------  */
/*  GLOBAL MODIFIERS                                                */
/*  --------------------------------------------------------------  */
/*                                                                  */
/*  --------------------------------------------------------------  */
.-bdAll {
    border: solid;
}
.-bdTop {
    border: none;
    border-top: solid;
}
.-bdLeft {
    border: none;
    border-left: solid;
}
.-bdRight {
    border: none;
    border-right: solid;
}
.-bdBottom {
    border: none;
    border-bottom: solid;
}
.-bdNormal {
    border-width: 1px;
}
.-bdHeavy {
    border-width: 2px;
}


/* OLD COLOUR CLASSES */

.-bgTran {
    background-color: transparent;
}
.-bgWhite {
    background-color: #ffffff;
}
.-bgBlack {
    background-color: #000000;
}
.-bgGray1 {
    background-color: #f7f9f9;
}
.-bgGray2 {
    background-color: #d9d9d9;
}
.-bgGray3 {
    background-color: #a5a5a5;
}
.-bgGray4 {
    background-color: #808080;
}
.-bgGray5 {
    background-color: #595959;
}
.-bgGray6 {
    background-color: #444444;
}
.-bgGray7 {
    background-color: #222222;
}

.-bdWhite {
    border-color: #ffffff;
}
.-bdGray1 {
    border-color: #f7f9f9;
}
.-bdGray2 {
    border-color: #d9d9d9;
}
.-bdGray3 {
    border-color: #a5a5a5;
}
.-bdGray4 {
    border-color: #808080;
}
.-bdGray5 {
    border-color: #595959;
}
.-bdGray6 {
    border-color: #444444;
}
.-bdGray7 {
    border-color: #222222;
}
.-bdBlack {
    border-color: #000000;
}
.-bdTrans {
    border-color: transparent;
}





.-txWhite {
    /* fallback color: #ffffff ; */
    color: rgb(255, 255, 255);
    /* css var value */
    /* - set default alpha value to default full value */
    /* - different alpha values st using -alpha{n} classes */
    --alpha: var(--c-aa);
    color: rgba(var(--c-whiteRgbBare), var(--alpha));
}

.-txGray1 {
    color: #f7f9f9;
    color: rgb(247, 249, 249);
    --alpha: var(--c-aa);
    color: rgba(var(--c-whiteRgbBare), var(--alpha));
}
.-txGray2 {
    color: #d9d9d9;
}
.-txGray3 {
    color: #a5a5a5;
}
.-txGray4 {
    color: #808080;
}
.-txGray5 {
    color: #595959;
}
.-txGray6 {
    color: #444444;
}
.-txGray7 {
    color: #222222;
}
.-txBlack {
    color: #000000;
}
.-txTrans {
    color: transparent;
}

[class*='-bgGray']:not(.noPseudo):hover {
    border: 1px solid #fff;
}
[class*='-bgGray']:not(.noPseudo):active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.-txPrimary {
    color: #ffffff;
}

.-primary {
    /*
    background-color: #337ab7;
    background-color: var(--c-primary, #337ab7);
    border-color: #2e6da4;
    border-color: var(--c-primaryB, #2e6da4);
    color: #fff;
    color: var(--c-white, #fff);
*/
    color: #fff;
    background-color: #222222;
    border-color: #111111;
}
.-primary:focus {
    background-color: #444;
    border-color: #333;
}
.-primary:hover {
    background-color: #444;
    border-color: #333;
}
.-primary:active {
    background-color: #555;
    border-color: #444;
}
.-primary:active:hover {
    background-color: #666;
    border-color: #555;
}

@supports (--test: forCustomProps) {
    .-primary {
        background-color: var(--c-primaryRgba, #222);
        border-color: var(--c-primaryBorderRgba);
        color: var(--c-primaryTextRgba, #fff);
    }
    .-primary:focus {
        background-color: var(--c-primary-fRgba, #222);
        border-color: var(--c-primaryBorder-fRgba);
        color: var(--c-primaryText-fRgba, #fff);
    }
    .-primary:hover {
        background-color: var(--c-primary-hRgba, #222);
        border-color: var(--c-primaryBorder-hRgba);
        color: var(--c-primaryText-hRgba, #fff);
    }
    .-primary:active {
        background-color: var(--c-primary-aRgba, #222);
        border-color: var(--c-primaryBorder-aRgba);
        color: var(--c-primaryText-aRgba, #fff);
    }
    .-primary:active:hover {
        background-color: var(--c-primary-ahRgba, #222);
        border-color: var(--c-primaryBorder-ahRgba);
        color: var(--c-primaryText-ahRgba, #fff);
    }

    .-txPrimary {
        color: var(--c-primaryRgba, #fff);
    }
    .-txPrimary:focus {
        color: var(--c-primary-fRgba, #fff);
    }
    .-txPrimary:hover {
        color: var(--c-primary-hRgba, #fff);
    }
    .-txPrimary:active {
        color: var(--c-primary-aRgba, #fff);
    }
    .-txPrimary:active:hover {
        color: var(--c-primary-ahRgba, #fff);
    }
    .-bdPrimary {
        border-color: var(--c-primaryRgba, #fff);
    }
    .-bdPrimary:focus {
        border-color: var(--c-primary-fRgba, #fff);
    }
    .-bdPrimary:hover {
        border-color: var(--c-primary-hRgba, #fff);
    }
    .-bdPrimary:active {
        border-color: var(--c-primary-aRgba, #fff);
    }
    .-bdPrimary:active:hover {
        border-color: var(--c-primary-ahRgba, #fff);
    }
}

.-positive {
    background-color: #03804d;
    background-color: var(--c-positive, #03804d);
}
.-positive.-subtle {
    background-color: #d4f3e6;
    background-color: var(--c-positiveSubtle, #d4f3e6);
}
.-caution {
    background-color: #a59b15;
    background-color: var(--c-caution, #a59b15);
}
.-caution.-subtle {
    background-color: #fffecf;
    background-color: var(--c-cautionSubtle, #fffecf);
}
.-negative {
    background-color: #b12a0b;
    background-color: var(--c-negative, #b12a0b);
}
.-negative.-subtle {
    background-color: #fdded8;
    background-color: var(--c-negativeSubtle, #d4f3e6);
}
.-neutral {
    background-color: #0192d0;
    background-color: var(--c-neutral, #0192d0);
}
.-neutral.-subtle {
    background-color: #d3f2ff;
    background-color: var(--c-neutralSubtle, #d3f2ff);
}
.-disabled {
    color: #a5a5a5;
    color: var(--c-gray35, #a5a5a5);
    cursor: not-allowed;
    opacity: .65;
}
[readonly] {
    opacity: .65;
}
.-link {
    color: #337ab7;
    color: var(--c-primary, #337ab7);
    font-weight: 400;
    /*    text-decoration: none;*/
}
.-fill {
    background-color: var(--c-gray15);
}
.-border {
    border: 1px solid var(--c-gray15);
}
.-borderPrimary {
    border-color: #337ab7;
    border-color: var(--c-primary, #337ab7);
}
.-borderPositive {
    border-color: #03804d;
    border-color: var(--c-positive, #03804d);
}
.-borderCaution {
    border-color: #a59b15;
    border-color: var(--c-caution, #a59b15);
}
.-borderNegative {
    border-color: #b12a0b;
    border-color: var(--c-negative, #b12a0b);
}
.-borderNeutral {
    border-color: #0192d0;
    border-color: var(--c-neutral, #337ab7);
}
.-textPrimary {
    color: #337ab7;
    color: var(--c-primary, #337ab7);
}
.-textPositive {
    color: #03804d;
    color: var(--c-positive, #03804d);
}
.-textCaution {
    color: #a59b15;
    color: var(--c-caution, #a59b15);
}
.-textNegative {
    color: #b12a0b;
    color: var(--c-negative, #b12a0b);
}
.-textNeutral {
    color: #0192d0;
    color: var(--c-neutral, #337ab7);
}
/*
label + input[type="password"] { color: #b12a0b; color: var(--c-negative, #b12a0b); }
input#exampleInputDanger + label { color: #b12a0b; color: var(--c-negative, #b12a0b); }
label[.b-input].-textNeutral  { color: #0192d0; color: var(--c-neutral, #337ab7); }
*/
.-circle {
    border-radius: 50%;
}
.-round {
    border-radius: .35em;
}
.-pill {
    border-radius: 1.7em;
}
.-tight {
    padding: 0;
}
.-inline > * {
    display: inline-block;
}
/*  COLOUR MODIFIERS                                                */
/*  --------------------------------------------------------------  */

/* color classes*/
.-c-Trans { color: transparent; }
.-bdc-Trans { border-color: transparent; }
.-bgc-Trans { background-color: transparent; }
/* Utility Colours */
.-c-Aqua    { color: rgb(127, 219, 255); }
.-c-Blue    { color: rgb(0, 116, 217); }
.-c-Fuchsia { color: rgb(240, 18, 190); }
.-c-Gray    { color: rgb(170, 170, 170); }
.-c-Green   { color: rgb(46, 204, 64); }
.-c-Lime    { color: rgb(1, 255, 112); }
.-c-Maroon  { color: rgb(133, 20, 75); }
.-c-Navy    { color: rgb(0, 31, 63); }
.-c-Olive   { color: rgb(61, 153, 112); }
.-c-Orange  { color: rgb(255, 133, 27); }
.-c-Purple  { color: rgb(177, 13, 201); }
.-c-Red     { color: rgb(255, 65, 54); }
.-c-Silver  { color: rgb(221, 221, 221); }
.-c-Teal    { color: rgb(57, 204, 204); }
.-c-Yellow  { color: rgb(255, 220, 0); }
.-c-White   { color: rgb(255, 255, 255); }
.-c-Black   { color: rgb(17, 17, 17); }
/* - background-color utility colours */
.-bgc-Aqua    { background-color: rgb(127, 219, 255); }
.-bgc-Blue    { background-color: rgb(0, 116, 217); }
.-bgc-Fuchsia { background-color: rgb(240, 18, 190); }
.-bgc-Gray    { background-color: rgb(170, 170, 170); }
.-bgc-Green   { background-color: rgb(46, 204, 64); }
.-bgc-Lime    { background-color: rgb(1, 255, 112); }
.-bgc-Maroon  { background-color: rgb(133, 20, 75); }
.-bgc-Navy    { background-color: rgb(0, 31, 63); }
.-bgc-Olive   { background-color: rgb(61, 153, 112); }
.-bgc-Orange  { background-color: rgb(255, 133, 27); }
.-bgc-Purple  { background-color: rgb(177, 13, 201); }
.-bgc-Red     { background-color: rgb(255, 65, 54); }
.-bgc-Silver  { background-color: rgb(221, 221, 221); }
.-bgc-Teal    { background-color: rgb(57, 204, 204); }
.-bgc-Yellow  { background-color: rgb(255, 220, 0); }
.-bgc-White   { background-color: rgb(255, 255, 255); }
.-bgc-Black   { background-color: rgb(17, 17, 17); }
/* - border-color utility colours */
.-bdc-Aqua    { border-color: rgb(127, 219, 255); }
.-bdc-Blue    { border-color: rgb(0, 116, 217); }
.-bdc-Fuchsia { border-color: rgb(240, 18, 190); }
.-bdc-Gray    { border-color: rgb(170, 170, 170); }
.-bdc-Green   { border-color: rgb(46, 204, 64); }
.-bdc-Lime    { border-color: rgb(1, 255, 112); }
.-bdc-Maroon  { border-color: rgb(133, 20, 75); }
.-bdc-Navy    { border-color: rgb(0, 31, 63); }
.-bdc-Olive   { border-color: rgb(61, 153, 112); }
.-bdc-Orange  { border-color: rgb(255, 133, 27); }
.-bdc-Purple  { border-color: rgb(177, 13, 201); }
.-bdc-Red     { border-color: rgb(255, 65, 54); }
.-bdc-Silver  { border-color: rgb(221, 221, 221); }
.-bdc-Teal    { border-color: rgb(57, 204, 204); }
.-bdc-Yellow  { border-color: rgb(255, 220, 0); }
.-bdc-White   { border-color: rgb(255, 255, 255); }
.-bdc-Black   { border-color: rgb(17, 17, 17); }



/* fallbacks for browsers with no css custom prop support           */
/*@supports not (--test: forCustomProp) {*/
    /* Set default colour values for all b-* elements
        add any exceptions to not() */
    .b-btn,
    .b-input,
    .b-inputFile,
    .b-nav__toggle,
    .b-nav__menuItemLink {
        color: #222222;
        background-color: transparent;
        border-color: #a5a5a5;
    }
    .b-btn:hover,
    .b-input:hover,
    .b-inputFile:hover,
    .b-nav__toggle:hover,
    .b-nav__menuItemLink:hover {
        color: #eeeeee;
        background-color: #444444;
        border-color: #a5a5a5;
    }
    .b-btn:focus,
    .b-input:focus,
    .b-inputFile:focus,
    .b-nav__toggle:focus,
    .b-nav__menuItemLink:focus {
        color: #eeeeee;
        background-color: #444444;
        border-color: #a5a5a5;
    }
    .b-btn:active,
    .b-input:active,
    .b-inputFile:active,
    .b-nav__toggle:active,
    .b-nav__menuItemLink:active {
        color: #eeeeee;
        background-color: #666666;
        border-color: #a5a5a5;
    }
    .b-btn:active:hover,
    .b-input:active:hover,
    .b-inputFile:active:hover,
    .b-nav__toggle:active:hover,
    .b-nav__menuItemLink:active:hover {
        color: #eeeeee;
        background-color: #888888;
        border-color: #a5a5a6;
    }

    /* Apply default halo to input with focus */
    .b-input:focus {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 1.0);
    }

    .-c-White { /* color: #ffffff; */ color: rgb(255, 255, 255); }
    .-c-Black { /* color: #000000; */ color: rgb(0, 0, 0); }
    .-c-Gray1 { /* color: #f7f9f9; */ color: rgb(247, 249, 249); }
    .-c-Gray2 { /* color: #d9d9d9; */ color: rgb(217, 217, 217); }
    .-c-Gray3 { /* color: #a5a5a5; */ color: rgb(165, 165, 165); }
    .-c-Gray4 { /* color: #808080; */ color: rgb(128, 128, 128); }
    .-c-Gray5 { /* color: #595959; */ color: rgb(89, 89, 89); }
    .-c-Gray6 { /* color: #444444; */ color: rgb(68, 68, 68); }
    .-c-Gray7 { /* color: #222222; */ color: rgb(34, 34, 34); }

    .-c-Accent1 { /* color: #5c832f; */ color: rgb(92, 131, 47); }
    .-c-Accent2 { /* color: #825534; */ color: rgb(130, 85, 52); }
    .-c-Default { /* color: #333333; */ color: rgb(51, 51, 51); }
    .-c-Primary { /* color: #337ab7; */ color: rgb(51, 122, 183); }
    .-c-Neutral { /* color: #5bc0de; */ color: rgb(91, 192, 222); }
    .-c-Caution { /* color: #f0ad4e; */ color: rgb(165, 155, 21); }
    .-c-Positive { /* color: #5cb85c; */ color: rgb(3, 128, 77); }
    .-c-Negative { /* color: #d9534f; */ color: rgb(177, 42, 11); }
    .-c-Link { /* #337ab7; */ color:rgb(51, 122, 183); }

    .-bgc-White { /* color: #ffffff; */ background-color: rgb(255, 255, 255); }
    .-bgc-Black { /* color: #000000; */ background-color: rgb(0, 0, 0); }
    .-bgc-Gray1 { /* color: #f7f9f9; */ background-color: rgb(247, 249, 249); }
    .-bgc-Gray2 { /* color: #d9d9d9; */ background-color: rgb(217, 217, 217); }
    .-bgc-Gray3 { /* color: #a5a5a5; */ background-color: rgb(165, 165, 165); }
    .-bgc-Gray4 { /* color: #808080; */ background-color: rgb(128, 128, 128); }
    .-bgc-Gray5 { /* color: #595959; */ background-color: rgb(89, 89, 89); }
    .-bgc-Gray6 { /* color: #444444; */ background-color: rgb(68, 68, 68); }
    .-bgc-Gray7 { /* color: #222222; */ background-color: rgb(34, 34, 34); }

    .-bgc-Accent1 { /* color: #5c832f; */ background-color: rgb(92, 131, 47); }
    .-bgc-Accent2 { /* color: #825534; */ background-color: rgb(130, 85, 52); }
    .-bgc-Default { /* color: #333333; */ background-color: rgb(51, 51, 51); }
    .-bgc-Primary { /* color: #337ab7; */ background-color: rgb(51, 122, 183); }
    .-bgc-Neutral { /* color: #5bc0de; */ background-color: rgb(91, 192, 222); }
    .-bgc-Caution { /* color: #f0ad4e; */ background-color: rgb(165, 155, 21); }
    .-bgc-Positive { /* color: #5cb85c; */ background-color: rgb(3, 128, 77); }
    .-bgc-Negative { /* color: #d9534f; */ background-color: rgb(177, 42, 11); }

    .-bdc-White { /* color: #ffffff; */ border-color: rgb(255, 255, 255); }
    .-bdc-Black { /* color: #000000; */ border-color: rgb(0, 0, 0); }
    .-bdc-Gray1 { /* color: #f7f9f9; */ border-color: rgb(247, 249, 249); }
    .-bdc-Gray2 { /* color: #d9d9d9; */ border-color: rgb(217, 217, 217); }
    .-bdc-Gray3 { /* color: #a5a5a5; */ border-color: rgb(165, 165, 165); }
    .-bdc-Gray4 { /* color: #808080; */ border-color: rgb(128, 128, 128); }
    .-bdc-Gray5 { /* color: #595959; */ border-color: rgb(89, 89, 89); }
    .-bdc-Gray6 { /* color: #444444; */ border-color: rgb(68, 68, 68); }
    .-bdc-Gray7 { /* color: #222222; */ border-color: rgb(34, 34, 34); }

    .-bdc-Accent1 { /* color: #5c832f; */ border-color: rgb(92, 131, 47); }
    .-bdc-Accent2 { /* color: #825534; */ border-color: rgb(130, 85, 52); }
    .-bdc-Default { /* color: #333333; */ border-color: rgb(51, 51, 51); }
    .-bdc-Primary { /* color: #337ab7; */ border-color: rgb(51, 122, 183); }
    .-bdc-Neutral { /* color: #5bc0de; */ border-color: rgb(91, 192, 222); }
    .-bdc-Caution { /* color: #f0ad4e; */ border-color: rgb(165, 155, 21); }
    .-bdc-Positive { /* color: #5cb85c; */ border-color: rgb(3, 128, 77); }
    .-bdc-Negative { /* color: #d9534f; */ border-color: rgb(177, 42, 11); }
/*}*/
/* for browsers that support custom props */
@supports (--test: forCustomProp) {
    /* Set default colour values for all b-* elements
        add any exceptions to not() */
    .b-btn,
    .b-input,
    .b-inputFile,
    .b-nav__toggle,
    .b-nav__menuItemLink {

        /* Set default scoped variables for color, background-color & border-color */
        /* - defaults overwritten using utility */
        /*   colour classes .c-{x}, .c-bg-{x}, .c-bd-{x} */
        --_cR: var(--c-defaultR);
        --_cG: var(--c-defaultG);
        --_cB: var(--c-defaultB);
        --_alpha: var(--c-defaultA);
        --_bdcR: var(--c-default-bdR);
        --_bdcG: var(--c-default-bdG);
        --_bdcB: var(--c-default-bdB);
        --_bdalpha: var(--c-default-bdA);
        --_bgcR: var(--c-default-bgR);
        --_bgcG: var(--c-default-bgG);
        --_bgcB: var(--c-default-bgB);
        --_bgalpha: var(--c-default-bgA);

        --_colour: var(--_cR), var(--_cG), var(--_cB), var(--_alpha);
        --_bd-colour: var(--_bdcR), var(--_bdcG), var(--_bdcB), var(--_bdalpha);
        --_bg-colour: var(--_bgcR), var(--_bgcG), var(--_bgcB), var(--_bgalpha);
        --_halo: var(--c-haloShadow);

        /* Set colours based on scoped variables */
        color: rgba(var(--_colour));
        border-color: rgba(var(--_bd-colour));
        background-color: rgba(var(--_bg-colour));
    }

    /* Calculate hover, focus, active, active&hover scoped colour variables */
    .b-btn:hover,
    .b-input:hover,
    .b-inputFile:hover,
    .b-nav__toggle:hover,
    .b-nav__menuItemLink:hover {
        --_colour: calc(var(--_cR) + var(--cd-d2h-r)), calc(var(--_cG) + var(--cd-d2h-g)), calc(var(--_cB) + var(--cd-d2h-b)), var(--_alpha);
        --_bd-colour: calc(var(--_bdcR) + var(--cd-d2h-r)), calc(var(--_bdcG) + var(--cd-d2h-g)), calc(var(--_bdcB) + var(--cd-d2h-b)), var(--_bdalpha);
        --_bg-colour: calc(var(--_bgcR) + var(--cd-d2h-r)), calc(var(--_bgcG) + var(--cd-d2h-g)), calc(var(--_bgcB) + var(--cd-d2h-b)), var(--_bgalpha);
    }

    .b-btn:focus,
    .b-input:focus,
    .b-inputFile:focus,
    .b-nav__toggle:focus,
    .b-nav__menuItemLink:focus {
        --_colour: calc(var(--_cR) + var(--cd-d2f-r)), calc(var(--_cG) + var(--cd-d2f-g)), calc(var(--_cB) + var(--cd-d2f-b)), var(--_alpha);
        --_bd-colour: calc(var(--_bdcR) + var(--cd-d2f-r)), calc(var(--_bdcG) + var(--cd-d2f-g)), calc(var(--_bdcB) + var(--cd-d2f-b)), var(--_bdalpha);
        --_bg-colour: calc(var(--_bgcR) + var(--cd-d2f-r)), calc(var(--_bgcG) + var(--cd-d2f-g)), calc(var(--_bgcB) + var(--cd-d2f-b)), var(--_bgalpha);
    }

    .b-btn:active,
/*    .b-input:active,*/
    .b-inputFile:active,
    .b-nav__toggle:active,
    .b-nav__menuItemLink:active {
        --_colour: calc(var(--_cR) + var(--cd-d2a-r)), calc(var(--_cG) + var(--cd-d2a-g)), calc(var(--_cB) + var(--cd-d2a-b)), var(--_alpha);
        --_bd-colour: calc(var(--_bdcR) + var(--cd-d2a-r)), calc(var(--_bdcG) + var(--cd-d2a-g)), calc(var(--_bdcB) + var(--cd-d2a-b)), var(--_bdalpha);
        --_bg-colour: calc(var(--_bgcR) + var(--cd-d2a-r)), calc(var(--_bgcG) + var(--cd-d2a-g)), calc(var(--_bgcB) + var(--cd-d2a-b)), var(--_bgalpha);
    }

    .b-btn:active:hover,
/*    .b-input:active:hover,*/
    .b-inputFile:active:hover,
    .b-nav__toggle:active:hover,
    .b-nav__menuItemLink:active:hover {
        --_colour: calc(var(--_cR) + var(--cd-d2ah-r)), calc(var(--_cG) + var(--cd-d2ah-g)), calc(var(--_cB) + var(--cd-d2ah-b)), var(--_alpha);
        --_bd-colour: calc(var(--_bdcR) + var(--cd-d2ah-r)), calc(var(--_bdcG) + var(--cd-d2ah-g)), calc(var(--_bdcB) + var(--cd-d2ah-b)), var(--_bdalpha);
        --_bg-colour: calc(var(--_bgcR) + var(--cd-d2ah-r)), calc(var(--_bgcG) + var(--cd-d2ah-g)), calc(var(--_bgcB) + var(--cd-d2ah-b)), var(--_bgalpha);
    }

    /* Focus halos */
    .b-input:focus {
/*    .b-inputFile:focus,*/
/*    .b-nav__toggle:focus,*/
/*    .b-nav__menuItemLink:focus {*/
        --_bg-colour: calc(var(--_bgcR) + var(--cd-d2f-r) - 20), calc(var(--_bgcG) + var(--cd-d2f-g) - 20), calc(var(--_bgcB) + var(--cd-d2f-b) - 20), var(--_bgalpha);

        box-shadow: var(--_halo);
    }

    /* Create scoped colour variables & apply to utility colour classes */
    [class*="-c-"] {
        --_alpha: 1.0;
        --_colour: var(--_cR), var(--_cG), var(--_cB), var(--_alpha);
        color: rgba(var(--_colour));
    }
    [class*="-bdc-"] {
        --_bdalpha: 1.0;
        --_bd-colour: var(--_bdcR), var(--_bdcG), var(--_bdcB), var(--_bdalpha);
        border-color: rgba(var(--_bd-colour));
    }
    [class*="-bgc-"] {
        --_bgalpha: 1.0;
        --_bg-colour: var(--_bgcR), var(--_bgcG), var(--_bgcB), var(--_bgalpha);
        background-color: rgba(var(--_bg-colour));
    }

    /* Set utility scoped variables */
    .-c-White { --_cR: var(--c-whiteR); --_cG: var(--c-whiteG); --_cB: var(--c-whiteB); }
    .-c-Gray1 { --_cR: var(--c-gray1R); --_cG: var(--c-gray1G); --_cB: var(--c-gray1B); }
    .-c-Gray2 { --_cR: var(--c-gray2R); --_cG: var(--c-gray2G); --_cB: var(--c-gray2B); }
    .-c-Gray3 { --_cR: var(--c-gray3R); --_cG: var(--c-gray3G); --_cB: var(--c-gray3B); }
    .-c-Gray4 { --_cR: var(--c-gray4R); --_cG: var(--c-gray4G); --_cB: var(--c-gray4B); }
    .-c-Gray5 { --_cR: var(--c-gray5R); --_cG: var(--c-gray5G); --_cB: var(--c-gray5B); }
    .-c-Gray6 { --_cR: var(--c-gray6R); --_cG: var(--c-gray6G); --_cB: var(--c-gray6B); }
    .-c-Gray7 { --_cR: var(--c-gray7R); --_cG: var(--c-gray7G); --_cB: var(--c-gray7B); }
    .-c-Black { --_cR: var(--c-blackR); --_cG: var(--c-blackG); --_cB: var(--c-blackB); }

    .-bgc-White { --_bgcR: var(--c-whiteR); --_bgcG: var(--c-whiteG); --_bgcB: var(--c-whiteB); }
    .-bgc-Gray1 { --_bgcR: var(--c-gray1R); --_bgcG: var(--c-gray1G); --_bgcB: var(--c-gray1B); }
    .-bgc-Gray2 { --_bgcR: var(--c-gray2R); --_bgcG: var(--c-gray2G); --_bgcB: var(--c-gray2B); }
    .-bgc-Gray3 { --_bgcR: var(--c-gray3R); --_bgcG: var(--c-gray3G); --_bgcB: var(--c-gray3B); }
    .-bgc-Gray4 { --_bgcR: var(--c-gray4R); --_bgcG: var(--c-gray4G); --_bgcB: var(--c-gray4B); }
    .-bgc-Gray5 { --_bgcR: var(--c-gray5R); --_bgcG: var(--c-gray5G); --_bgcB: var(--c-gray5B); }
    .-bgc-Gray6 { --_bgcR: var(--c-gray6R); --_bgcG: var(--c-gray6G); --_bgcB: var(--c-gray6B); }
    .-bgc-Gray7 { --_bgcR: var(--c-gray7R); --_bgcG: var(--c-gray7G); --_bgcB: var(--c-gray7B); }
    .-bgc-Black { --_bgcR: var(--c-blackR); --_bgcG: var(--c-blackG); --_bgcB: var(--c-blackB); }

    .-bdc-White { --_bdcR: var(--c-whiteR); --_bdcG: var(--c-whiteG); --_bdcB: var(--c-whiteB); }
    .-bdc-Gray1 { --_bdcR: var(--c-gray1R); --_bdcG: var(--c-gray1G); --_bdcB: var(--c-gray1B); }
    .-bdc-Gray2 { --_bdcR: var(--c-gray2R); --_bdcG: var(--c-gray2G); --_bdcB: var(--c-gray2B); }
    .-bdc-Gray3 { --_bdcR: var(--c-gray3R); --_bdcG: var(--c-gray3G); --_bdcB: var(--c-gray3B); }
    .-bdc-Gray4 { --_bdcR: var(--c-gray4R); --_bdcG: var(--c-gray4G); --_bdcB: var(--c-gray4B); }
    .-bdc-Gray5 { --_bdcR: var(--c-gray5R); --_bdcG: var(--c-gray5G); --_bdcB: var(--c-gray5B); }
    .-bdc-Gray6 { --_bdcR: var(--c-gray6R); --_bdcG: var(--c-gray6G); --_bdcB: var(--c-gray6B); }
    .-bdc-Gray7 { --_bdcR: var(--c-gray7R); --_bdcG: var(--c-gray7G); --_bdcB: var(--c-gray7B); }
    .-bdc-Black { --_bdcR: var(--c-blackR); --_bdcG: var(--c-blackG); --_bdcB: var(--c-blackB); }

    /* Set overrides for scoped colour variables based on utility class */
    /* color */
    .-c-Accent1 { --_cR: var(--c-accent1R); --_cG: var(--c-accent1G); --_cB: var(--c-accent1B); }
    .-c-Accent2 { --_cR: var(--c-accent2R); --_cG: var(--c-accent2G); --_cB: var(--c-accent2B); }
    .-c-Default { --_cR: var(--c-defaultR); --_cG: var(--c-defaultG); --_cB: var(--c-defaultB); }
    .-c-Primary { --_cR: var(--c-primaryR); --_cG: var(--c-primaryG); --_cB: var(--c-primaryB); }
    .-c-Neutral { --_cR: var(--c-neutralR); --_cG: var(--c-neutralG); --_cB: var(--c-neutralB); }
    .-c-Caution { --_cR: var(--c-cautionR); --_cG: var(--c-cautionG); --_cB: var(--c-cautionB); }
    .-c-Positive { --_cR: var(--c-positiveR); --_cG: var(--c-positiveG); --_cB: var(--c-positiveB); }
    .-c-Negative { --_cR: var(--c-negativeR); --_cG: var(--c-negativeG); --_cB: var(--c-negativeB); }
    .-c-Link { --_cR: var(--c-linkR); --_cG: var(--c-linkG); --_cB: var(--c-linkB); }
    /* border-color */
    .-bdc-Accent1 { --_bdcR: var(--c-accent1R); --_bdcG: var(--c-accent1G); --_bdcB: var(--c-accent1B); }
    .-bdc-Accent2 { --_bdcR: var(--c-accent2R); --_bdcG: var(--c-accent2G); --_bdcB: var(--c-accent2B); }
    .-bdc-Caution { --_bdcR: var(--c-cautionR); --_bdcG: var(--c-cautionG); --_bdcB: var(--c-cautionB); --_halo: var(--c-haloShadowCaution); }
    .-bdc-Default { --_bdcR: var(--c-defaultR); --_bdcG: var(--c-defaultG); --_bdcB: var(--c-defaultB); --_halo: var(--c-haloShadow); }
    .-bdc-Neutral { --_bdcR: var(--c-neutralR); --_bdcG: var(--c-neutralG); --_bdcB: var(--c-neutralB); --_halo: var(--c-haloShadowNeutral); }
    .-bdc-Primary { --_bdcR: var(--c-primaryR); --_bdcG: var(--c-primaryG); --_bdcB: var(--c-primaryB); --_halo: var(--c-haloShadowPrimary); }
    .-bdc-Positive { --_bdcR: var(--c-positiveR); --_bdcG: var(--c-positiveG); --_bdcB: var(--c-positiveB); --_halo: var(--c-haloShadowPositive); }
    .-bdc-Negative { --_bdcR: var(--c-negativeR); --_bdcG: var(--c-negativeG); --_bdcB: var(--c-negativeB); --_halo: var(--c-haloShadowNegative); }
    .-bdc-Link { --_bdcR: var(--c-link-bdR); --_bdcG: var(--c-link-bdG); --_bdcB: var(--c-link-bdB); }
    /* background-color */
    .-bgc-Accent1 { --_bgcR: var(--c-accent1R); --_bgcG: var(--c-accent1G); --_bgcB: var(--c-accent1B); }
    .-bgc-Accent2 { --_bgcR: var(--c-accent2R); --_bgcG: var(--c-accent2G); --_bgcB: var(--c-accent2B); }
    .-bgc-Caution { --_bgcR: var(--c-cautionR); --_bgcG: var(--c-cautionG); --_bgcB: var(--c-cautionB); }
    .-bgc-Default { --_bgcR: var(--c-defaultR); --_bgcG: var(--c-defaultG); --_bgcB: var(--c-defaultB); }
    .-bgc-Neutral { --_bgcR: var(--c-neutralR); --_bgcG: var(--c-neutralG); --_bgcB: var(--c-neutralB); }
    .-bgc-Primary { --_bgcR: var(--c-primaryR); --_bgcG: var(--c-primaryG); --_bgcB: var(--c-primaryB); --_bgalpha: 1; }
    .-bgc-Positive { --_bgcR: var(--c-positiveR); --_bgcG: var(--c-positiveG); --_bgcB: var(--c-positiveB); }
    .-bgc-Negative { --_bgcR: var(--c-negativeR); --_bgcG: var(--c-negativeG); --_bgcB: var(--c-negativeB); }
    .-bgc-Link { --_bgcR: var(--c-link-bgR); --_bgcG: var(--c-link-bgG); --_bgcB: var(--c-link-bgB); }

    /* Alpha utility classes - IMPORTANT keep after other defs for specificty */
    .-a0 { --_alpha: var(--c-ca0, 0.0); }
    .-a1 { --_alpha: var(--c-ca1, 0.1); }
    .-a2 { --_alpha: var(--c-ca2, 0.2); }
    .-a3 { --_alpha: var(--c-ca3, 0.3); }
    .-a4 { --_alpha: var(--c-ca4, 0.4); }
    .-a5 { --_alpha: var(--c-ca5, 0.5); }
    .-a6 { --_alpha: var(--c-ca6, 0.6); }
    .-a7 { --_alpha: var(--c-ca7, 0.7); }
    .-a8 { --_alpha: var(--c-ca8, 0.8); }
    .-a9 { --_alpha: var(--c-ca9, 0.9); }
    .-aA { --_alpha: var(--c-caa, 1.0); }
}
/*  --------------------------------------------------------------  */
/*  ENDOF COLOUR MODIFIERS                                          */
/*  --------------------------------------------------------------  */
/*  =================== END GLOBAL MODIFIERS =====================  */