/************************************
Table of Contents 
************************************/

/* 
- Color Variables
- Colors
- Background Colors
- Border Colors
- Background Gradients
*/


/****** Color Variables ******/

:root {

	/* NP Brand Black and White  */

	--base-color-black:    #000;	
	--base-color-white:    #fff;
    --base-color-offwhite: #f2f2f2;

	/* NP Brand Blues */

	--base-color-npblue-100: #ebfcff;
	--base-color-npblue-300: #bce8f2;
	--base-color-npblue-500: #91d6e4;
	--base-color-npblue-700: #4dcae3;
	--base-color-npblue-900: #0087AC;
    --base-color-iceblue   : #00fdff;
	
	/* Grey Variations */

    --base-color-magnesium-grey: #c1c7cb;
	--base-color-mercury-grey:   #e2e3e6;
	--base-color-grey-25:        #fcfcfc;
	--base-color-grey-50:        #fafafa;
	--base-color-grey-100:       #f4f4f4;
	--base-color-grey-200:       #e8e8e8;
	--base-color-grey-300:       #d6d6d6;
	--base-color-grey-400:       #a6a6a6;
	--base-color-grey-500:       #757575;
	--base-color-grey-600:       #575757;
	--base-color-grey-700:       #454545;
	--base-color-grey-800:       #2c2c2c;
	--base-color-grey-900:       #1c1c1c;

	/* Greys with a blue undertone

	--base-color-grey-25: #FCFCFD;
	--base-color-grey-50: #F9FAFB;
	--base-color-grey-100: #F3F4F6;
	--base-color-grey-200: #E5E7EB;
	--base-color-grey-300: #D2D6DB;
	--base-color-grey-400: #9DA4AF;
	--base-color-grey-500: #6C737F;
	--base-color-grey-600: #4C5661;
	--base-color-grey-700: #384351;
	--base-color-grey-800: #202A37;
	--base-color-grey-900: #111927;

	*/

	/* Danger */

	--base-color-danger-100: #FEE3E1;
    --base-color-danger-200: #FECBC7;
    --base-color-danger-300: #FDA29B;
	--base-color-danger-500: #D92D20;
	--base-color-danger-900: #7A271A;

	/* Warning */

	--base-color-warning-100: #FEEFC7;
	--base-color-warning-500: #F78F08;
	--base-color-warning-900: #772D0D;

	/* Success */

	--base-color-success-100: #DBFAE9;
	--base-color-success-500: #059E5E;
	--base-color-success-900: #004712;
}


/****** Colors ******/

/* NP Brand Black and White */

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

.offwhite {
    color: var(--base-color-offwhite);
}

/* NP Brand Blues */

.npblue-100 {
	color: var(--base-color-npblue-100);
}
.npblue-300 {
	color: var(--base-color-npblue-300);
}
.npblue-500 {
	color: var(--base-color-npblue-500);
}
.npblue-700 {
	color: var(--base-color-npblue-700);
}
.npblue-900 {
	color: var(--base-color-npblue-900);
}

.npiceblue{
    color: var(--base-color-iceblue);
}

/* Grey Variations */

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

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

.grey-25 {
	color: var(--base-color-grey-25);
}
.grey-50 {
	color: var(--base-color-grey-50);
}
.grey-100 {
	color: var(--base-color-grey-100);
}
.grey-200 {
	color: var(--base-color-grey-200);
}
.grey-300 {
	color: var(--base-color-grey-300);
}
.grey-400 {
	color: var(--base-color-grey-400);
}
.grey-500 {
	color: var(--base-color-grey-500);
}
.grey-600 {
	color: var(--base-color-grey-600);
}
.grey-700 {
	color: var(--base-color-grey-700);
}
.grey-800 {
	color: var(--base-color-grey-800);
}
.grey-900 {
	color: var(--base-color-grey-900);
}

/* Danger Red Variations */

.danger-100 {
	color: var(--base-color-danger-100);
}
.danger-500 {
	color: var(--base-color-danger-500);
}
.danger-900 {
	color: var(--base-color-danger-900);
}

/* Warning Yellow Variations */

.warning-100 {
	color: var(--base-color-warning-100);
}
.warning-500 {
	color: var(--base-color-warning-500);
}
.warning-900 {
	color: var(--base-color-warning-900);
}

/* Success Variations */

.success-100 {
	color: var(--base-color-success-100);
}
.success-500 {
	color: var(--base-color-success-500);
}
.success-900 {
	color: var(--base-color-success-900);
}


/****** Background Colors ******/

/* NP Brand Black and White */

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

/* NP Brand Blues */

.npblue-100-bg {
	background-color: var(--base-color-npblue-100);
}
.npblue-300-bg {
	background-color: var(--base-color-npblue-300);
}
.npblue-500-bg {
	background-color: var(--base-color-npblue-500);
}
.npblue-700-bg {
	background-color: var(--base-color-npblue-700);
}
.npblue-900-bg {
	background-color: var(--base-color-npblue-900);
}

/* Grey Variations */

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

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

.grey-25-bg {
	background-color: var(--base-color-grey-25);
}
.grey-50-bg {
	background-color: var(--base-color-grey-50);
}
.grey-100-bg {
	background-color: var(--base-color-grey-100);
}
.grey-200-bg {
	background-color: var(--base-color-grey-200);
}
.grey-300-bg {
	background-color: var(--base-color-grey-300);
}
.grey-400-bg {
	background-color: var(--base-color-grey-400);
}
.grey-500-bg {
	background-color: var(--base-color-grey-500);
}
.grey-600-bg {
	background-color: var(--base-color-grey-600);
}
.grey-700-bg {
	background-color: var(--base-color-grey-700);
}
.grey-800-bg {
	background-color: var(--base-color-grey-800);
}
.grey-900-bg {
	background-color: var(--base-color-grey-900);
}

/* Danger Red Variations */

.danger-100-bg {
    background-color: var(--base-color-danger-100);
}
.danger-300-bg {
    background-color: var(--base-color-danger-300);
}
.danger-500-bg {
    background-color: var(--base-color-danger-500);
}
.danger-900-bg {
    background-color: var(--base-color-danger-900);
}

/* Warning Yellow Variations */

.warning-100-bg {
	background-color: var(--base-color-warning-100);
}
.warning-500-bg {
	background-color: var(--base-color-warning-500);
}
.warning-900-bg {
	background-color: var(--base-color-warning-900);
}

/* Success Green Variations */

.success-100-bg {
	background-color: var(--base-color-success-100);
}
.success-500-bg {
	background-color: var(--base-color-success-500);
}
.success-900-bg {
	background-color: var(--base-color-success-900);
}


/****** Border Colors ******/

/* NP Brand Black and White */

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

/* NP Brand Blues */

.npblue-100-border {
	border-color: var(--base-color-npblue-100)!important;
}
.npblue-300-border {
	border-color: var(--base-color-npblue-300)!important;
}
.npblue-500-border {
	border-color: var(--base-color-npblue-500)!important;
}
.npblue-700-border {
	border-color: var(--base-color-npblue-700)!important;
}
.npblue-900-border {
	border-color: var(--base-color-npblue-900)!important;
}

/* Grey Variations */

.grey-25-border {
	border-color: var(--base-color-grey-25)!important;
}
.grey-50-border {
	border-color: var(--base-color-grey-50)!important;
}
.grey-100-border {
	border-color: var(--base-color-grey-100)!important;
}
.grey-200-border {
	border-color: var(--base-color-grey-200)!important;
}
.grey-300-border {
	border-color: var(--base-color-grey-300)!important;
}
.grey-400-border {
	border-color: var(--base-color-grey-400)!important;
}
.grey-500-border {
	border-color: var(--base-color-grey-500)!important;
}
.grey-600-border {
	border-color: var(--base-color-grey-600)!important;
}
.grey-700-border {
	border-color: var(--base-color-grey-700)!important;
}
.grey-800-border {
	border-color: var(--base-color-grey-800)!important;
}
.grey-900-border {
	border-color: var(--base-color-grey-900)!important;
}

/* Danger Red Variations */

.danger-100-border {
    border-color: var(--base-color-danger-100)!important;
}
.danger-300-border {
    border-color: var(--base-color-danger-300)!important;
}
.danger-300-border-solid {
    border-color: var(--base-color-danger-300)!important;
    border-style: solid;
}
.danger-500-border {
    border-color: var(--base-color-danger-500)!important;
}
.danger-900-border {
    border-color: var(--base-color-danger-900)!important;
}

/* Warning Yellow Variations */

.warning-100-border {
	border-color: var(--base-color-warning-100)!important;
}
.warning-500-border {
	border-color: var(--base-color-warning-500)!important;
}
.warning-900-border {
	border-color: var(--base-color-warning-900)!important;
}

/* Success Variations */

.success-100-border {
	border-color: var(--base-color-success-100)!important;
}
.success-500-border {
	border-color: var(--base-color-success-500)!important;
}
.success-900-border {
	border-color: var(--base-color-success-900)!important;
}


/****** Background Gradients ******/

/* classes are named by .gradient-startcolorcode-endcolorcode-angledegree-specificheight */

.gradient-333-000-180 {
	background: linear-gradient(180deg, rgba(51,51,51,1) 0%, rgba(0,0,0,1) 100%);
}

.gradient-grey800-black-180 {
	background: linear-gradient(180deg, var(--base-color-grey-800) 0%, var(--base-color-black) 100%);
}

.gradient-f2f2f2-ffffff-180 {
	background: linear-gradient(180deg, rgba(242,242,242, 44%) 0%, rgba(255,255,255,0) 300px);
}

.gradient-f2f2f2-ffffff-0 {
	background: linear-gradient(0deg, rgba(242,242,242,1) 0%, rgba(255,255,255,0) 300px);
}

.gradient-464646-000-180{
    background: linear-gradient(180deg, #464646 0%, #000000 100%)
}

.gradient-C3C3C3-919191-180{
    background: linear-gradient(180deg, #C3C3C3 0%, #919191 100%);
}

.gradient-DBDBDB-C3C3C3-180{
    background: linear-gradient(180deg, #DBDBDB 0%, #C3C3C3 100%);
}

.gradient-FEFEFE-DBDBDB-180{
    background: linear-gradient(180deg, #FEFEFE 0%, #DBDBDB 100%);
}
/* gradient blue  */
.gradient-DBF5FB-FFF-180{
    background: linear-gradient(180deg, #DBF5FB 0%, #FFF 100%)
}
@media (max-width:568px){
    .gradient-DBF5FB-FFF-180{
        background: linear-gradient(180deg, #DBF5FB 0%, #FFF 40%)
    }
}

/* white to black gradient */

.gradient-body{
    background: linear-gradient(180deg, #FEFEFE 0%,  #DBDBDB 33%,  #C3C3C3 66%, #919191 80%, #000 100%)
}

.gradient-mercury-magnesium-grey-228{
    background: transparent linear-gradient(228deg, #e2e3e673 0%, #c1c7cb73 100%) 0% 0% no-repeat padding-box;
}

.gradient-white-mercury-grey-180{
    background: transparent linear-gradient(180deg, #ffffff 0%, var(--base-color-mercury-grey) 100%) 0% 0% no-repeat padding-box;
}