/* 
 * Copyright (c) 2005-2017 MicroPact, Inc. All Rights Reserved.
 *
 *  /\ /\ \/ /   Always design for the end goal, develop with them in mind
 * / / \ \  /    deploy with a path forward, and success will be more easily achieved
 * \ \_/ /  \
 *  \___/ /\ \                                           - Che de Bruin
 *            
 * This software is the proprietary information of MicroPact, Inc.
 * Use is subject to license terms.
 *
 * Page description: CSS Colors
 *
 * @author MicroPact, Inc.
 * @since 1.0
 *
 */

 /* BLACK & WHITE */
.background-black {
	background-color: #000000; 
	color: #ffffff;
}

.background-white {
	background-color: #ffffff;
	color: var(--main-font-primary);
}

 /* GRAY */

.background-gray,
a.background-gray {
	background-color: var(--main-color-gray);
	color: var(--main-font-primary);
}

.background-gray-light,
a.background-gray-light {
	background-color: var(--main-color-gray-light);
	color: var(--main-font-primary);
}

.background-gray-lighter,
a.background-gray-lighter {
	background-color: var(--main-color-gray-lighter);
	color: var(--main-font-primary);
}

.background-gray-lightest,
a.background-gray-lightest {
	background-color: var(--main-color-gray-lightest);
	color: var(--main-font-primary);
}

.background-gray-dark,
a.background-gray-dark {
	background-color: var(--main-color-gray-dark);
	color: var(--main-font-primary);
}

.background-gray-darker,
a.background-gray-darker {
	background-color: var(--main-color-gray-darker);
	color: var(--main-font-primary-reverse);
}

.background-gray-darkest,
a.background-gray-darkest {
	background-color: var(--main-color-gray-darkest);
	color: var(--main-font-primary-reverse);
}

.background-gray-black,
a.background-black {
	background-color: var(--main-color-gray-black);
	color: var(--main-font-primary-reverse);
}

.hover-gray-darkest:hover {
	color: var(--main-font-primary);
}

/* BLUE */
.background-blue-darkest {
	background-color: #113050;
	color: var(--main-font-primary-reverse);
}

.background-blue-darker {
	background-color: #14426f;
	color: var(--main-font-primary-reverse);
}

.background-blue-dark {
	background-color: #185592;
	color: var(--main-font-primary-reverse);
}

.background-blue {
	background-color: #1974c7;
	color: var(--main-font-primary-reverse);
}

.background-blue-light {
	background-color: #5191d2;
	color: var(--main-font-primary-reverse);
}

/* BLUE-GRAY */
.background-bluegray-darkest {
	background-color: #2e333a;
	color: var(--main-font-primary-reverse);
}

.background-bluegray-darker {
	background-color: #495158;
	color: var(--main-font-primary-reverse);
}

.background-bluegray-dark {
	background-color: #5a666f;
	color: var(--main-font-primary-reverse);
}

.background-bluegray {
	background-color: #72838d;
	color: var(--main-font-primary-reverse);
}

.background-bluegray-lightest {
	background-color: #e7eaec;
}

.background-white {
	background-color: #fff;  
}

.background-split-gray-black-white {
    background-image: -webkit-linear-gradient(330deg, #272727 49%, #ffffff 51%);
    min-width: 35px;
    width: 35px;
}

.background-white svg path,
.background-gray-light svg path,
.background-gray-lighter svg path,
.background-gray-lightest svg path {
	fill: var(--main-fill-primary);
}

.background-black svg path,
.background-gray-dark svg path,
.background-gray-darker svg path,
.background-gray-darkest svg path,
.background-gray-black svg path,
.background-blue svg path,
.background-blue-darkest svg path,
.background-blue-darker svg path,
.background-blue-dark svg path,
.background-blue-light svg path,
.background-bluegray svg path,
.background-bluegray-dark svg path,
.background-bluegray-darker svg path,
.background-bluegray-darkest svg path,
.background-bluegray svg path  {
	fill: var(--main-font-color-white);
}

.background-black a:not(.button),
.background-gray-dark a:not(.button),
.background-gray-darker a:not(.button),
.background-gray-darkest a:not(.button),
.background-gray-black a:not(.button),
.background-blue a:not(.button),
.background-blue-darkest a:not(.button),
.background-blue-darker a:not(.button),
.background-blue-dark a:not(.button),
.background-blue-light a:not(.button),
.background-bluegray a:not(.button),
.background-bluegray-dark a:not(.button),
.background-bluegray-darker a:not(.button),
.background-bluegray-darkest a:not(.button),
.background-bluegray a:not(.button) {
	color: var(--main-font-color-white);
}

.background-gray-light a:not(.button),
.background-gray-lighter a:not(.button),
.background-gray-lightest a:not(.button),
.background-gray a:not(.button) {
	color: var(--main-font-primary);
}

.hover-gray-lighter:hover {
	background-color: var(--main-color-gray-lighter);
}


.hover-black:hover {
	background-color: var(--main-font-color-gray-darkest);
	color: var(--main-font-primary-reverse);
}

.hover-blue-darkest:hover {
	background-color: #0f2c4a;
	color: var(--main-font-primary-reverse);
}

.hover-blue-darker:hover {
	background-color: #14426f;
	color: var(--main-font-primary-reverse);
}

.hover-blue-dark:hover {
	background-color: #185592;
	color: var(--main-font-primary-reverse);
}

.hover-blue:hover {
	background-color: #1974c7;
	color: var(--main-font-primary-reverse);
}

.hover-blue:hover {
	background-color: #1974c7;
	color: var(--main-font-primary-reverse);
}

.hover-bluegray-medium:hover {
	background-color: #3d454d;
	color: var(--main-font-primary-reverse);
}

.hover-bluegray-light:hover {
	background-color: #e7eaec;
	color: var(--main-font-color-gray-darkest);
}

.hover-black:hover path,
.hover-gray:hover path,
.hover-gray-dark:hover path,
.hover-gray-medium:hover path {
	fill: #ffffff;
}

.hover-gray-light:hover path,
.hover-bluegray-light:hover path {
	fill: #272727;
}

.font-blue {
	color: var(--main-color-blue);
}

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

.font-green-light {
	color: var(--main-color-green-light);
}

.font-green-lighter {
	color: var(--main-color-green-lighter);
}

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

.font-green-darker {
	color: var(--main-color-green-darker);
}

.font-red {
	color: var(--main-color-red);
}

svg.icon-red path {
	fill: var(--main-color-red);
}

svg.icon-blue path {
	fill: var(--main-color-blue);
}

svg.icon-gray-darker path {
	fill: var(--main-color-gray-darker);
}

svg.icon-gray-dark path {
	fill: var(--main-color-gray-dark);
}

svg.icon-red path {
	fill: var(--main-color-red);
}