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

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


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

:root {

	/* Base Brand Colours */

	--base-color-red:       #88181A;	
	--base-color-white:     #FFF;
	--base-color-gray:      #A7A9AC;
	--base-color-lightgray: #D1D3D4;
    --base-color-green:     #9BAC6A;
    --base-color-blue:      #495979;
    --base-color-brown:     #452D34;
	--base-color-pink:      #AE7097;
    --base-color-yellow:    #F2C970;

    /* Base Color Variations */

    --base-color-green-50:  #d7ddc4;
    --base-color-gray-50:   #eaebeb;
    --base-color-brown-50:  #90878a;
	--base-color-pink-dark: #6d455e;
    --base-color-yellow-50: #fbeed3;
    --base-color-white-50:  rgba(255, 255, 255, 0.5);

    /* Grey Variations */

    --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: #CBCDCE;
    --base-color-grey-500: #9D9FA2;
    --base-color-grey-600: #707070;
    --base-color-grey-700: #384351;
    --base-color-grey-800: #202A37;
    --base-color-grey-900: #111927;

	/* Danger */

	--base-color-danger-25: #FFFAFA;
	--base-color-danger-50: #FEF1F1;
	--base-color-danger-100: #FEE3E1;
	--base-color-danger-200: #FECBC7;
	--base-color-danger-300: #FDA29B;
	--base-color-danger-400: #F97066;
	--base-color-danger-500: #F04438;
	--base-color-danger-600: #D92D20;
	--base-color-danger-700: #B42318;
	--base-color-danger-800: #912018;
	--base-color-danger-900: #7A271A;

	/* Warning */

	--base-color-warning-25: #FFFCF5;
	--base-color-warning-50: #FFFAEB;
	--base-color-warning-100: #FEEFC7;
	--base-color-warning-200: #FEDF8A;
	--base-color-warning-300: #FEC94D;
	--base-color-warning-400: #FDB021;
	--base-color-warning-500: #F78F08;
	--base-color-warning-600: #DD6903;
	--base-color-warning-700: #B54708;
	--base-color-warning-800: #91370D;
	--base-color-warning-900: #772D0D;

	/* Success */

	--base-color-success-25: #F5FFFA;
	--base-color-success-50: #EEFCF4;
	--base-color-success-100: #DBFAE9;
	--base-color-success-200: #B5F2D2;
	--base-color-success-300: #7CDFAC;
	--base-color-success-400: #37CD85;
	--base-color-success-500: #059E5E;
	--base-color-success-600: #008547;
	--base-color-success-700: #007036;
	--base-color-success-800: #005C25;
	--base-color-success-900: #004712;

    /* Accent Colors - Flycoin */
    --flycoinaccent-lightblue: #78c8d8;
    --flycoinaccent-darkblue:  #518ac8;
    --flycoinlink-color:       #518ac8;
    --flycoinaccent-gradient: linear-gradient(120deg, #78c8d8 0%, #518ac8 60%);
}


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

/* Base Brand Colours */

.red {
	color: var(--base-color-red);
}
.white {
	color: var(--base-color-white);
}
.lightgray {
	color: var(--base-color-lightgray);
}
.gray {
	color: var(--base-color-gray);
}
.yellow{
    color: var(--base-color-yellow);
}
.green{
    color: var(--base-color-green);
}
.blue{
    color: var(--base-color-blue);
}
.brown{
    color: var(--base-color-brown);
}
.pink{
    color: var(--base-color-pink);
}
.darkpink{
    color: var(--base-color-pink-dark);
}


/* Grey Variations */

.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);
}

/* Error Red Variations */

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

/* Warning Yellow Variations */

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

/* Success Variations */

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


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

.red-bg {
	background-color: var(--base-color-red);
}
.white-bg {
	background-color: var(--base-color-white);
}
.gray-bg {
	background-color: var(--base-color-gray);
}
.lightgray-bg {
	background-color: var(--base-color-lightgray);
}
.blue-bg {
	background-color: var(--base-color-blue);
}
.green-bg {
	background-color: var(--base-color-green);
}
.lightgreen-bg {
	background-color: var(--base-color-lightgreen);
}
.yellow-bg{
    background-color:var( --base-color-yellow);
}
.brown-bg{
    background-color: var(--base-color-brown);
}

/* Background colors with 50% opacity */

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

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

.white-opacity-50{
    background-color:var( --base-color-white-50) ;
}

/* Grey Variations */

.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);
}

/* Error Red Variations */

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

/* Warning Yellow Variations */

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

/* Success Green Variations */

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


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

/* Base Brand Colours */

.red-border {
	border-color: var(--base-color-red);
}
.white-border {
	border-color: var(--base-color-white);
}
.lightgray-border{
	border-color: var(--base-color-lightgray);
}
.gray-border {
	border-color: var(--base-color-gray);
}
.yellow-border{
    border-color: var(--base-color-yellow);
}
.green-border{
    border-color: var(--base-color-green);
}
.blue-border{
    border-color: var(--base-color-blue);
}
.brown-border{
    border-color: var(--base-color-brown);
}
.pink-border{
    border-color: var(--base-color-pink);
}

/* 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;
}

/* Error Red Variations */

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

/* Warning Yellow Variations */

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

/* Success Variations */

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