:root, :root.light {
    --color-black: #000;
    --color-white: #fff;
    --color-gray600: #333333;
    --color-gray400: #696969;
    --color-black54: #767676;
    --color-gray300: #A8A8A8;
    --color-gray200: #d9d9d9;
    --color-gray100: #f0f0f0;
    --color-orange: #ff6200;
    --color-indigo500: #525199;
    --color-sky500: #60a6da;
    --color-fuchsia500: #ab0066;
    --color-lime500: #d0d93c;
    --color-leaf500: #349651;
    --color-minus600: #D70000;
    --color-plus500: #349651;
    --color-right-arrow: #ff6200;

    /* New direction  */
    --color-violet500: #7724FF;
    --color-sky500: #89D6FD;
    --color-maroon500: #4D0020;
    --color-raspberry500: #D40199;
    --color-blush500: #F689FD;
    --color-sun500: #FFE100;
    /* END New direction */

    --bgcolor-orange: #ff6200;
    --bgcolor-gray100: #f0f0f0;
    --bgcolor-gray200: #A8A8A8;
    --bgcolor-gray300: #A8A8A8;
    --bgcolor-gray400: #696969;
    --bgcolor-gray600: #333333;
    --bgcolor-white: #fff;
    --bgcolor-indigo500: #525199;
    --bgcolor-fuchsia500: #ab0066;
    --bgcolor-card: #fff;
    --bgcolor-li: #fff;
    --bgcolor-banner: #ff6200;
    --bghero-herolink: #fff;
}
:root.dark {
    --color-black: #fff;
    --color-white: #fff;
    --color-gray600: #fff;
    --color-gray400: #fff;
    --color-gray300: #333333;
    --color-gray200: #3D3D3D;
    --color-gray100: #696969;
    --color-orange: #ff6200;
    --color-sky500: #335D7D;
    --color-indigo500: #fff;
    --color-fuchsia500: #fff;
    --color-lime500: #7C8224;
    --color-leaf500: #1F5A30;
    --color-minus600: #D70000;
    --color-plus500: #349651;
    --color-right-arrow: #3D3D3D;
    --bgcolor-orange: #ff6200;
    --bgcolor-gray100: #333333;
    --bgcolor-gray200: #3D3D3D;
    --bgcolor-gray300: #A8A8A8;
    --bgcolor-gray400: #212121;
    --bgcolor-gray600: #050505;
    --bgcolor-white: #212121;
    --bgcolor-card: #333333;
    --bgcolor-li: #fff;
    --bgcolor-banner: #3D3D3D;
}




/* 1. Background classes */
.color-orange {
    color: #ff6200 !important;
}
.color-violet {
    color: #7724FF !important;
}
.color-blush {
    color: #F689FD !important;
}
.color-raspberry {
    color: #D40199 !important;
}
.color-black {
    color: #333 !important;
}
.bg-orange {
    background-color: #ff6200;
}
.bg-sun {
    background-color: var(--color-sun500) !important;
}
.bg-sky {
    background-color: var(--color-sky500) !important;
}
.bg-blush {
    background-color: var(--color-blush500) !important;
}
.bg-raspberry {
    background-color: #D40199 !important;
}
.bg-maroon {
    background-color: #4D0020 !important;
}
.bg-grey01 {
    background-color: #F7F4F1 !important;
}
.bg-grey01_full {
    background-color: #F7F4F1 !important;
    position: relative;
}
.bg-grey01_full:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    background-color: #F7F4F1;
    width: 1000px;
    top: 0;
    right: 100%;
}
.bg-grey01_full:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    background-color: #F7F4F1;
    width: 1000px;
    top: 0;
    left: 100%;
}
.bg-white {
    background-color: #FFF !important;
}

.color-white {
    color: #fff;
}