:root {
    --gray-50: #f7f9fa;
    --gray-100: #CFD7DD;
    --gray-200: #B7C4CD;
    --gray-300: #96A9B6;
    --gray-400: #8298A8;
    --gray-500: #637E92;
    --gray-600: #5A7385;
    --gray-700: #465968;
    --gray-800: #364550;
    --gray-900: #2A353D;

    --blue-50: #E6F3FE;
    --blue-100: #B0DAFA;
    --blue-200: #8AC8F8;
    --blue-300: #54AFF5;
    --blue-400: #33A0F3;
    --blue-500: #0088F0;
    --blue-600: #007CDA;
    --blue-700: #0061AA;
    --blue-800: #004B84;
    --blue-900: #003965;

    --purple-50: #F5E6FE;
    --purple-100: #E0B0FA;
    --purple-200: #C98AF8;
    --purple-300: #B354F5;
    --purple-400: #A033F3;
    --purple-500: #7A00F0;
    --purple-600: #6B00DA;
    --purple-700: #5600AA;
    --purple-800: #430084;
    --purple-900: #320065;

    --orange-50: #FFF2E5;
    --orange-100: #FFD9C6;
    --orange-200: #FFC0A7;
    --orange-300: #FFA888;
    --orange-400: #FF8F69;
    --orange-500: #F05C29;
    --orange-600: #E04F25;
    --orange-700: #C84720;
    --orange-800: #A63D1A;
    --orange-900: #8A3114;

    --red-50: #FDE8E5;
    --red-100: #F9CFC6;
    --red-200: #F5B6A7;
    --red-300: #F19D88;
    --red-400: #ED8469;
    --red-500: #d53514;
    --red-600: #c12e11;
    --red-700: #a7280e;
    --red-800: #8b210b;
    --red-900: #6e1a08;

    --yellow-50: #FFF8E5;
    --yellow-100: #FFF0C6;
    --yellow-200: #FFE8A7;
    --yellow-300: #FFE088;
    --yellow-400: #FFD869;
    --yellow-500: #f3ca27;
    --yellow-600: #e0b800;
    --yellow-700: #c9a300;
    --yellow-800: #b38e00;
    --yellow-900: #9c7800;

    --green-50: #E6F4EA;
    --green-100: #C0E3C9;
    --green-200: #9AD2A8;
    --green-300: #74C187;
    --green-400: #4EBF87;
    --green-500: #2e7d32;
    --green-600: #27642a;
    --green-700: #1f4c21;
    --green-800: #173519;
    --green-900: #0f1d10;
}

/*************************************
**************************************
** GRAY
**************************************
*************************************/
.bg-gray-50 {
    background-color: var(--gray-50) !important;
}
.bg-gray-100 {
    background-color: var(--gray-100) !important;
}
.bg-gray-200 {
    background-color: var(--gray-200) !important;
}
.bg-gray-300 {
    background-color: var(--gray-300) !important;
}
.bg-gray-400 {
    background-color: var(--gray-400) !important;
}
.bg-gray-500 {
    background-color: var(--gray-500) !important;
}
.bg-gray-600 {
    background-color: var(--gray-600) !important;
}
.bg-gray-700 {
    background-color: var(--gray-700) !important;
}
.bg-gray-800 {
    background-color: var(--gray-800) !important;
}
.bg-gray-900 {
    background-color: var(--gray-900) !important;
}
.border-gray-50 {
    border-color: var(--gray-50) !important;
}
.border-gray-100 {
    border-color: var(--gray-100) !important;
}
.border-gray-200 {
    border-color: var(--gray-200) !important;
}
.border-gray-300 {
    border-color: var(--gray-300) !important;
}
.border-gray-400 {
    border-color: var(--gray-400) !important;
}
.border-gray-500 {
    border-color: var(--gray-500) !important;
}
.border-gray-600 {
    border-color: var(--gray-600) !important;
}
.border-gray-700 {
    border-color: var(--gray-700) !important;
}
.border-gray-800 {
    border-color: var(--gray-800) !important;
}
.border-gray-900 {
    border-color: var(--gray-900) !important;
}
.text-gray-50 {
    color: var(--gray-50) !important;
}
.text-gray-100 {
    color: var(--gray-100) !important;
}
.text-gray-200 {
    color: var(--gray-200) !important;
}
.text-gray-300 {
    color: var(--gray-300) !important;
}
.text-gray-400 {
    color: var(--gray-400) !important;
}
.text-gray-500 {
    color: var(--gray-500) !important;
}
.text-gray-600 {
    color: var(--gray-600) !important;
}
.text-gray-700 {
    color: var(--gray-700) !important;
}
.text-gray-800 {
    color: var(--gray-800) !important;
}
.text-gray-900 {
    color: var(--gray-900) !important;
}

/*************************************
**************************************
** BLUE
**************************************
*************************************/
.bg-blue-50 {
    background-color: var(--blue-50) !important;
}
.bg-blue-100 {
    background-color: var(--blue-100) !important;
}
.bg-blue-200 {
    background-color: var(--blue-200) !important;
}
.bg-blue-300 {
    background-color: var(--blue-300) !important;
}
.bg-blue-400 {
    background-color: var(--blue-400) !important;
}
.bg-blue-500 {
    background-color: var(--blue-500) !important;
}
.bg-blue-600 {
    background-color: var(--blue-600) !important;
}
.bg-blue-700 {
    background-color: var(--blue-700) !important;
}
.bg-blue-800 {
    background-color: var(--blue-800) !important;
}
.bg-blue-900 {
    background-color: var(--blue-900) !important;
}

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

/*************************************
**************************************
** PURPLE
**************************************
*************************************/
.bg-purple-50 {
    background-color: var(--purple-50) !important;
}
.bg-purple-100 {
    background-color: var(--purple-100) !important;
}
.bg-purple-200 {
    background-color: var(--purple-200) !important;
}
.bg-purple-300 {
    background-color: var(--purple-300) !important;
}
.bg-purple-400 {
    background-color: var(--purple-400) !important;
}
.bg-purple-500 {
    background-color: var(--purple-500) !important;
}
.bg-purple-600 {
    background-color: var(--purple-600) !important;
}
.bg-purple-700 {
    background-color: var(--purple-700) !important;
}
.bg-purple-800 {
    background-color: var(--purple-800) !important;
}
.bg-purple-900 {
    background-color: var(--purple-900) !important;
}
.border-purple-50 {
    border-color: var(--purple-50) !important;
}
.border-purple-100 {
    border-color: var(--purple-100) !important;
}
.border-purple-200 {
    border-color: var(--purple-200) !important;
}
.border-purple-300 {
    border-color: var(--purple-300) !important;
}
.border-purple-400 {
    border-color: var(--purple-400) !important;
}
.border-purple-500 {
    border-color: var(--purple-500) !important;
}
.border-purple-600 {
    border-color: var(--purple-600) !important;
}
.border-purple-700 {
    border-color: var(--purple-700) !important;
}
.border-purple-800 {
    border-color: var(--purple-800) !important;
}
.border-purple-900 {
    border-color: var(--purple-900) !important;
}
.text-purple-50 {
    color: var(--purple-50) !important;
}
.text-purple-100 {
    color: var(--purple-100) !important;
}
.text-purple-200 {
    color: var(--purple-200) !important;
}
.text-purple-300 {
    color: var(--purple-300) !important;
}
.text-purple-400 {
    color: var(--purple-400) !important;
}
.text-purple-500 {
    color: var(--purple-500) !important;
}
.text-purple-600 {
    color: var(--purple-600) !important;
}
.text-purple-700 {
    color: var(--purple-700) !important;
}
.text-purple-800 {
    color: var(--purple-800) !important;
}
.text-purple-900 {
    color: var(--purple-900) !important;
}

/*************************************
**************************************
** ORANGE
**************************************
*************************************/
.border-orange-50 {
    border-color: var(--orange-50) !important;
}
.border-orange-100 {
    border-color: var(--orange-100) !important;
}
.border-orange-200 {
    border-color: var(--orange-200) !important;
}
.border-orange-300 {
    border-color: var(--orange-300) !important;
}
.border-orange-400 {
    border-color: var(--orange-400) !important;
}
.border-orange-500 {
    border-color: var(--orange-500) !important;
}
.border-orange-600 {
    border-color: var(--orange-600) !important;
}
.border-orange-700 {
    border-color: var(--orange-700) !important;
}
.border-orange-800 {
    border-color: var(--orange-800) !important;
}
.border-orange-900 {
    border-color: var(--orange-900) !important;
}
.bg-orange-50 {
    background-color: var(--orange-50) !important;
}
.bg-orange-100 {
    background-color: var(--orange-100) !important;
}
.bg-orange-200 {
    background-color: var(--orange-200) !important;
}
.bg-orange-300 {
    background-color: var(--orange-300) !important;
}
.bg-orange-400 {
    background-color: var(--orange-400) !important;
}
.bg-orange-500 {
    background-color: var(--orange-500) !important;
}
.bg-orange-600 {
    background-color: var(--orange-600) !important;
}
.bg-orange-700 {
    background-color: var(--orange-700) !important;
}
.bg-orange-800 {
    background-color: var(--orange-800) !important;
}
.bg-orange-900 {
    background-color: var(--orange-900) !important;
}
.text-orange-50 {
    color: var(--orange-50) !important;
}
.text-orange-100 {
    color: var(--orange-100) !important;
}
.text-orange-200 {
    color: var(--orange-200) !important;
}
.text-orange-300 {
    color: var(--orange-300) !important;
}
.text-orange-400 {
    color: var(--orange-400) !important;
}
.text-orange-500 {
    color: var(--orange-500) !important;
}
.text-orange-600 {
    color: var(--orange-600) !important;
}
.text-orange-700 {
    color: var(--orange-700) !important;
}
.text-orange-800 {
    color: var(--orange-800) !important;
}
.text-orange-900 {
    color: var(--orange-900) !important;
}

/*************************************
**************************************
** RED
**************************************
*************************************/
.bg-red-50 {
    background-color: var(--red-50) !important;
}
.bg-red-100 {
    background-color: var(--red-100) !important;
}
.bg-red-200 {
    background-color: var(--red-200) !important;
}
.bg-red-300 {
    background-color: var(--red-300) !important;
}
.bg-red-400 {
    background-color: var(--red-400) !important;
}
.bg-red-500 {
    background-color: var(--red-500) !important;
}
.bg-red-600 {
    background-color: var(--red-600) !important;
}
.bg-red-700 {
    background-color: var(--red-700) !important;
}
.bg-red-800 {
    background-color: var(--red-800) !important;
}
.bg-red-900 {
    background-color: var(--red-900) !important;
}
.border-red-50 {
    border-color: var(--red-50) !important;
}
.border-red-100 {
    border-color: var(--red-100) !important;
}
.border-red-200 {
    border-color: var(--red-200) !important;
}
.border-red-300 {
    border-color: var(--red-300) !important;
}
.border-red-400 {
    border-color: var(--red-400) !important;
}
.border-red-500 {
    border-color: var(--red-500) !important;
}
.border-red-600 {
    border-color: var(--red-600) !important;
}
.border-red-700 {
    border-color: var(--red-700) !important;
}
.border-red-800 {
    border-color: var(--red-800) !important;
}
.border-red-900 {
    border-color: var(--red-900) !important;
}
.text-red-50 {
    color: var(--red-50) !important;
}
.text-red-100 {
    color: var(--red-100) !important;
}
.text-red-200 {
    color: var(--red-200) !important;
}
.text-red-300 {
    color: var(--red-300) !important;
}
.text-red-400 {
    color: var(--red-400) !important;
}
.text-red-500 {
    color: var(--red-500) !important;
}
.text-red-600 {
    color: var(--red-600) !important;
}
.text-red-700 {
    color: var(--red-700) !important;
}
.text-red-800 {
    color: var(--red-800) !important;
}
.text-red-900 {
    color: var(--red-900) !important;
}

/*************************************
**************************************
** YELLOW
**************************************
*************************************/
.bg-yellow-50 {
    background-color: var(--yellow-50) !important;
}
.bg-yellow-100 {
    background-color: var(--yellow-100) !important;
}
.bg-yellow-200 {
    background-color: var(--yellow-200) !important;
}
.bg-yellow-300 {
    background-color: var(--yellow-300) !important;
}
.bg-yellow-400 {
    background-color: var(--yellow-400) !important;
}
.bg-yellow-500 {
    background-color: var(--yellow-500) !important;
}
.bg-yellow-600 {
    background-color: var(--yellow-600) !important;
}
.bg-yellow-700 {
    background-color: var(--yellow-700) !important;
}
.bg-yellow-800 {
    background-color: var(--yellow-800) !important;
}
.bg-yellow-900 {
    background-color: var(--yellow-900) !important;
}
.border-yellow-50 {
    border-color: var(--yellow-50) !important;
}
.border-yellow-100 {
    border-color: var(--yellow-100) !important;
}
.border-yellow-200 {
    border-color: var(--yellow-200) !important;
}
.border-yellow-300 {
    border-color: var(--yellow-300) !important;
}
.border-yellow-400 {
    border-color: var(--yellow-400) !important;
}
.border-yellow-500 {
    border-color: var(--yellow-500) !important;
}
.border-yellow-600 {
    border-color: var(--yellow-600) !important;
}
.border-yellow-700 {
    border-color: var(--yellow-700) !important;
}
.border-yellow-800 {
    border-color: var(--yellow-800) !important;
}
.border-yellow-900 {
    border-color: var(--yellow-900) !important;
}
.text-yellow-50 {
    color: var(--yellow-50) !important;
}
.text-yellow-100 {
    color: var(--yellow-100) !important;
}
.text-yellow-200 {
    color: var(--yellow-200) !important;
}
.text-yellow-300 {
    color: var(--yellow-300) !important;
}
.text-yellow-400 {
    color: var(--yellow-400) !important;
}
.text-yellow-500 {
    color: var(--yellow-500) !important;
}
.text-yellow-600 {
    color: var(--yellow-600) !important;
}
.text-yellow-700 {
    color: var(--yellow-700) !important;
}
.text-yellow-800 {
    color: var(--yellow-800) !important;
}
.text-yellow-900 {
    color: var(--yellow-900) !important;
}

/*************************************
**************************************
** GREEN
**************************************
*************************************/
.bg-green-50 {
    background-color: var(--green-50) !important;
}
.bg-green-100 {
    background-color: var(--green-100) !important;
}
.bg-green-200 {
    background-color: var(--green-200) !important;
}
.bg-green-300 {
    background-color: var(--green-300) !important;
}
.bg-green-400 {
    background-color: var(--green-400) !important;
}
.bg-green-500 {
    background-color: var(--green-500) !important;
}
.bg-green-600 {
    background-color: var(--green-600) !important;
}
.bg-green-700 {
    background-color: var(--green-700) !important;
}
.bg-green-800 {
    background-color: var(--green-800) !important;
}
.bg-green-900 {
    background-color: var(--green-900) !important;
}
.border-green-50 {
    border-color: var(--green-50) !important;
}
.border-green-100 {
    border-color: var(--green-100) !important;
}
.border-green-200 {
    border-color: var(--green-200) !important;
}
.border-green-300 {
    border-color: var(--green-300) !important;
}
.border-green-400 {
    border-color: var(--green-400) !important;
}
.border-green-500 {
    border-color: var(--green-500) !important;
}
.border-green-600 {
    border-color: var(--green-600) !important;
}
.border-green-700 {
    border-color: var(--green-700) !important;
}
.border-green-800 {
    border-color: var(--green-800) !important;
}
.border-green-900 {
    border-color: var(--green-900) !important;
}
.text-green-50 {
    color: var(--green-50) !important;
}
.text-green-100 {
    color: var(--green-100) !important;
}
.text-green-200 {
    color: var(--green-200) !important;
}
.text-green-300 {
    color: var(--green-300) !important;
}
.text-green-400 {
    color: var(--green-400) !important;
}
.text-green-500 {
    color: var(--green-500) !important;
}
.text-green-600 {
    color: var(--green-600) !important;
}
.text-green-700 {
    color: var(--green-700) !important;
}
.text-green-800 {
    color: var(--green-800) !important;
}
.text-green-900 {
    color: var(--green-900) !important;
}