/*** Colors ***************************************/
:root {
    /*primary*/
    --pro-cyan: #009FE3;
    --blue-grey: #254a5d;
    /*secondary*/
    --navy: #206092;
    --teal: #00968f;
    --dark-green: #509e2f;
    --green: #43b02a;
    --yellow: #f1be48;
    --orange: #e35205;
    /*grayscale*/
    --black: #2b2926;
    --dark-grey: #21343d;
    --grey: #374c57;
    --light-grey: #5b7380;
    --slate: #94a7b0;
    --silver: #c3d0d6;
    --off-white: #f5f8fa;
    --white: #ffffff;
    /*unknown*/
    --crimson: #da2e4e;
    --light-pro-cyan: #45bbe6;
}
/*** End Colors ************************************/

/*** Text Colors ***********************************/
.blue-grey {
    color: var(--blue-grey);
}

.crimson {
    color: var(--crimson);
}

.dark-green {
    color: var(--dark-green);
}

.dark-grey {
    color: var(--dark-grey);
}

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

.grey {
    color: var(--grey);
}

.light-grey {
    color: var(--light-grey);
}

.light-pro-cyan {
    color: var(--light-pro-cyan);
}

.navy {
    color: var(--navy);
}

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

.off-white {
    color: var(--off-white);
}

.pro-cyan {
    color: var(--pro-cyan);
}

.silver {
    color: var(--silver);
}

.slate {
    color: var(--slate);
}

.teal {
    color: var(--teal);
}

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

.yellow {
    color: var(--yellow);
}
/*** End Text Colors ****************************/

/*** Background Colors ****************************/
.black-bg {
    background-color: var(--black);
}

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

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

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

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

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

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

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

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

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

.navy-override-bg {
    background-color: var(--navy) !important;
}

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

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

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

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

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

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

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

.yellow-bg {
    background-color: var(--yellow);
}
/*** End Background Colors ************************/