:root {
    --white: #fff;
    --black: #000;
    --red: #F44336;
    --danger-red: #E57373;
    --green: #4CAF50;
    --success-green: #2ecc71;
    --light-green: #8BC34A;
    --forest-green: #218838;
    --pea-green: #246B34;
    --caribbean-green: #00CC99;
    --blue: #2196F3;
    --primary-blue: #007bff;
    --light-blue: #03A9F4;
    --ribbon-blue: #0066FF;
    --science-blue: #0053D0;
    --endeavour-blue: #0066AF;
    --origin-blue: #0000FF;
    --pickled-bluewood: #2F3C4E;
    --pink: #c5bec1;
    --purple: #9C27B0;
    --deep-purple: #673AB7;
    --spindle: #ABB8E5;
    --indigo: #3F51B5;
    --cyan: #00BCD4;
    --french-pass: #b1ebfc;
    --teal: #009688;
    --lime: #CDDC39;
    --yellow: #FFEB3B;
    --amber: #FFC107;
    --orange: #FF9800;
    --deep-orange: #FF5722;
    --brown: #795548;
    --grey: #9E9E9E;
    --blue-grey: #607D8B;
    --dove-grey: #616161;
    --mercury: #e2e2e2;
    --alto: #dad8d8;
    --alabaster: #FAFAFA;
    --seashell: #f1f1f1;
    --mine-shaft: #333333;
    --red-orange: #FF3F34;
    --devil-red: #860111;
    --primary-color: var(--endeavour-blue);
    --secondary-color: #02518a;
    --accent-color: var(--white);
}

/* BACKGROUND */

.bg-white {
    background-color: var(--white);
    color: var(--black);
}

.bg-black {
    background-color: var(--black);
    color: var(--white);
}

.bg-red {
    background-color: var(--red);
    color: var(--white);
}

.bg-danger-red {
    background-color: var(--danger-red);
    color: var(--white);
}

.bg-pink {
    background-color: var(--pink);
    color: var(--white);
}

.bg-purple {
    background-color: var(--purple);
    color: var(--white);
}

.bg-deep-purple {
    background-color: var(--deep-purple);
    color: var(--white);
}

.bg-indigo {
    background-color: var(--indigo);
    color: var(--white);
}

.bg-blue {
    background-color: var(--blue);
    ;
    color: var(--white);
}

.bg-origin-blue {
    background-color: var(--origin-blue);
    color: var(--white);
}

.bg-primary-blue {
    background-color: var(--primary-blue);
    color: var(--white);
}

.bg-light-blue {
    background-color: var(--light-blue);
    color: var(--white);
}

.bg-cyan {
    background-color: var(--cyan);
    color: var(--white);
}

.bg-teal {
    background-color: var(--teal);
    color: var(--white);
}

.bg-green {
    background-color: var(--green);
    color: var(--white);
}

.bg-success-green {
    background-color: var(--success-green);
    color: var(--white);
}

.bg-light-green {
    background-color: var(--light-green);
    color: var(--white);
}

.bg-lime {
    background-color: var(--lime);
    color: var(--black);
}

.bg-yellow {
    background-color: var(--yellow);
    color: var(--black);
}

.bg-amber {
    background-color: var(--amber);
    color: var(--white);
}

.bg-orange {
    background-color: var(--orange);
    color: var(--white);
}

.bg-deep-orange {
    background-color: var(--deep-orange);
    color: var(--white);
}

.bg-brown {
    background-color: var(--brown);
    color: var(--white);
}

.bg-grey {
    background-color: var(--grey);
    color: var(--white);
}

.bg-blue-grey {
    background-color: var(--blue-grey);
    color: var(--white);
}

.bg-ribbon-blue {
    background-color: var(--ribbon-blue);
    color: var(--white);
}

.bg-science-blue {
    background-color: var(--science-blue);
    color: var(--white);
}

.bg-endeavour-blue {
    background-color: var(--endeavour-blue);
    color: var(--white);
}

.bg-forest-green {
    background-color: var(--forest-green);
    color: var(--white);
}

.bg-red-orange {
    background-color: var(--red-orange);
    color: var(--white);
}

.bg-devil-red {
    background-color: var(--devil-red);
    color: var(--white);
}

.bg-caribbean-green {
    background-color: var(--caribbean-green);
    color: var(--white);
}

.bg-spindle {
    background-color: var(--spindle);
    color: var(--black);
}

.bg-french-pass{
    background-color: var(--french-pass);
    color: var(--black);
}

/* COLOR */

.white {
    color: var(--white)!important;
    border-color: var(--white)!important;
}

.black {
    color: var(--black)!important;
    border-color: var(--black)!important;
}

.red {
    color: var(--red)!important;
    border-color: var(--red)!important;
}

.danger-red {
    color: var(--danger-red)!important;
    border-color: var(--danger-red)!important;
}

.pink {
    color: var(--pink)!important;
    border-color: var(--pink)!important;
}

.purple {
    color: var(--purple)!important;
    border-color: var(--purple)!important;
}

.deep-purple {
    color: var(--deep-purple)!important;
    border-color: var(--deep-purple)!important;
}

.indigo {
    color: var(--indigo)!important;
    border-color: var(--indigo)!important;
}

.blue {
    color: var(--blue)!important;
    border-color: var(--blue)!important;
}

.primary-blue {
    color: var(--primary-blue)!important;
    border-color: var(--primary-blue)!important;
}

.light-blue {
    color: var(--light-blue)!important;
    border-color: var(--light-blue)!important;
}

.cyan {
    color: var(--cyan)!important;
    border-color: var(--cyan)!important;
}

.teal {
    color: var(--teal)!important;
    border-color: var(--teal)!important;
}

.green {
    color: var(--green)!important;
    border-color: var(--green)!important;
}

.success-green {
    border-color: var(--success-green)!important;
    color: var(--success-green)!important;
}

.light-green {
    color: var(--light-green)!important;
    border-color: var(--light-green)!important;
}

.lime {
    color: var(--lime)!important;
    border-color: var(--lime)!important;
}

.yellow {
    color: var(--yellow)!important;
    border-color: var(--yellow)!important;
}

.amber {
    color: var(--amber)!important;
    border-color: var(--amber)!important;
}

.orange {
    color: var(--orange)!important;
    border-color: var(--orange)!important;
}

.deep-orange {
    color: var(--deep-orange)!important;
    border-color: var(--deep-orange)!important;
}

.brown {
    color: var(--brown)!important;
    border-color: var(--brown)!important;
}

.grey {
    color: var(--grey)!important;
    border-color: var(--grey)!important;
}

.blue-grey {
    color: var(--blue-grey)!important;
    border-color: var(--blue-grey)!important;
}

.ribbon-blue {
    color: var(--ribbon-blue);
    border-color: var(--ribbon-blue);
}

.science-blue {
    color: var(--science-blue);
    border-color: var(--science-blue);
}

.endeavour-blue {
    color: var(--endeavour-blue);
    border-color: var(--endeavour-blue);
}

.forest-green {
    color: var(--forest-green);
    border-color: var(--forest-green);
}

.red-orange {
    color: var(--red-orange);
    border-color: var(--red-orange);
}

.devil-red {
    color: var(--devil-red);
    border-color: var(--devil-red);
}

.origin-blue {
    color: var(--origin-blue);
    border-color: var(--origin-blue);
}