/* Design system for Foundations color */
/* Primary Colors */
.primary-bg { 
    background-color: #054268;
}
.primary-text { 
    color: #054268;
}
/* Secondary Colors */
.secondary-bg { 
    background-color: #8DC6E8; 
}
.secondary-text { 
    color: #8DC6E8; 
}
/* black Colors */
.black-bg { 
    background-color: #141414; 
}
.black-opacities-primary{
    color: var(--black-opacities-primary, rgba(20, 20, 20, 0.83));
}
.black-opacities-tertiary{
color: var(--black-opacities-tertiary, rgba(20, 20, 20, 0.50));
}
.black-text { 
    color: #141414; 
}
/* white Colors */
.white-bg { 
    background-color: #FFFFFF;
}
.white-text { 
    color: #FFFFFF;
}
/* positive Colors */
.positive-bg { 
    background-color: #06C167;
}
.positive-text { 
    color: #06C167;
}
/* Warning Colors */
.Warning-bg { 
    background-color: #FFC043;
}
.Warning-text { 
    color: #FFC043;
}
/* Negative Colors */
.Negative-bg { 
    background-color: #E11900; 
}
.Negative-text { 
    color: #E11900; 
}
/* Design system for Primitives color */

/* navy color*/
.bg-navy-50{
    background: #E6ECF0;
}
.bg-navy-100{
    background: var(--navy-100, #CDD9E1);
}
.bg-navy-200{
    background: var(--navy-200, #9BB3C3);
}
.bg-navy-300{
    background: var(--navy-300, #698EA4);
}
.bg-navy-400{
    background: var(--navy-400, #376886);
}
.bg-navy-500{
    background: #054268;
}
.bg-navy-600{
    background: var(--navy-600, #043553);
}
.bg-navy-700{
    background: var(--navy-700, #03283E);
}
.bg-navy-800{
    background: var(--navy-800, #021A2A);
}
.bg-navy-900{
    background: var(--navy-900, #010D15);
}
.navy-50{
    color: #E6ECF0;
}
.navy-100{
    color: var(--navy-100, #CDD9E1);
}
.navy-200{
    color: var(--navy-200, #9BB3C3);
}
.navy-300{
    color: var(--navy-300, #698EA4);
}
.navy-400{
    color: var(--navy-400, #376886);
}
.navy-500{
    color: #054268;
}
.navy-600{
    color: var(--navy-600, #043553);
}
.navy-700{
    color: var(--navy-700, #03283E);
}
.navy-800{
    color: var(--navy-800, #021A2A);
}
.navy-900{
    color: var(--navy-900, #010D15);
}

/* lightblue color*/
.bg-lightblue-50{
    background: var(--lightblue-50, #F4F9FD);
}
.bg-lightblue-100{
    background: var(--lightblue-100, #E8F4FA);
}
.bg-lightblue-200{
    background: var(--lightblue-200, #D1E8F6);
}
.bg-lightblue-300{
    background: var(--lightblue-300, #BBDDF1);
}
.bg-lightblue-400{
    background: var(--lightblue-400, #A4D1ED);
}
.bg-lightblue-500{
    background: var(--lightblue-500, #8DC6E8);
}
.bg-lightblue-600{
    background: var(--lightblue-600, #719EBA);
}
.bg-lightblue-700{
    background: var(--lightblue-700, #55778B);
}
.bg-lightblue-800{
    background: var(--lightblue-800, #384F5D);
}
.bg-lightblue-900{
    background: var(--lightblue-900, #1C282E);
}
.lightblue-50{
    color: var(--lightblue-50, #F4F9FD);
}
.lightblue-100{
    color: var(--lightblue-100, #E8F4FA);
}
.lightblue-200{
    color: var(--lightblue-200, #D1E8F6);
}
.lightblue-300{
    color: var(--lightblue-300, #BBDDF1);
}
.lightblue-400{
    color: var(--lightblue-400, #A4D1ED);
}
.lightblue-500{
    color: var(--lightblue-500, #8DC6E8);
}
.lightblue-600{
    color: var(--lightblue-600, #719EBA);
}
.lightblue-700{
    color: var(--lightblue-700, #55778B);
}
.lightblue-800{
    color: var(--lightblue-800, #384F5D);
}
.lightblue-900{
    color: var(--lightblue-900, #1C282E);
}
/* green color*/
.bg-green-50{
    background: var(--green-50, #E6F9F0);
}
.bg-green-100{
    background: var(--green-100, #CDF3E1);
}
.bg-green-200{
    background: var(--green-200, #9BE6C2);
}
.bg-green-300{
    background: var(--green-300, #6ADAA4);
}
.bg-green-400{
    background: var(--green-400, #38CD85);
}
.bg-green-500{
    background: var(--green-500, #06C167);
}
.bg-green-600{
    background: var(--green-600, #059A52);
}
.bg-green-700{
    background: var(--green-700, #04743E);
}
.bg-green-800{
    background: var(--green-800, #024D29);
}
.bg-green-900{
    background: var(--green-900, #012715);
}
.green-50{
    color: var(--green-50, #E6F9F0);
}
.green-100{
    color: var(--green-100, #CDF3E1);
}
.green-200{
    color: var(--green-200, #9BE6C2);
}
.green-300{
    color: var(--green-300, #6ADAA4);
}
.green-400{
    color: var(--green-400, #38CD85);
}
.green-500{
    color: var(--green-500, #06C167);
}
.green-600{
    color: var(--green-600, #059A52);
}
.green-700{
    color: var(--green-700, #04743E);
}
.green-800{
    color: var(--green-800, #024D29);
}
.green-900{
    color: var(--green-900, #012715);
}
/* yellow color*/
.bg-yellow-50{
    background: var(--yellow-50, #FFF9EC);
}
.bg-yellow-100{
    background: var(--yellow-100, #FFF2D9);
}
.bg-yellow-200{
    background: var(--yellow-200, #FFE6B4);
}
.bg-yellow-300{
    background: var(--yellow-300, #FFD98E);
}
.bg-yellow-400{
    background: var(--yellow-400, #FFCD69);
}
.bg-yellow-500{
    background: var(--yellow-500, #FFC043);
}
.bg-yellow-600{
    background: var(--yellow-600, #CC9A36);
}
.bg-yellow-700{
    background: var(--yellow-700, #997328);
}
.bg-yellow-800{
    background: var(--yellow-800, #664D1B);
}
.bg-yellow-900{
    background: var(--yellow-900, #33260D);
}
.yellow-50{
    color: var(--yellow-50, #FFF9EC);
}
.yellow-100{
    color: var(--yellow-100, #FFF2D9);
}
.yellow-200{
    color: var(--yellow-200, #FFE6B4);
}
.yellow-300{
    color: var(--yellow-300, #FFD98E);
}
.yellow-400{
    color: var(--yellow-400, #FFCD69);
}
.yellow-500{
    color: var(--yellow-500, #FFC043);
}
.yellow-600{
    color: var(--yellow-600, #CC9A36);
}
.yellow-700{
    color: var(--yellow-700, #997328);
}
.yellow-800{
    color: var(--yellow-800, #664D1B);
}
.yellow-900{
    color: var(--yellow-900, #33260D);
}

/* red color*/
.bg-red-50{
    background: var(--red-50, #FCE8E6);
}
.bg-red-100{
    background: var(--red-100, #F9D1CC);
}
.bg-red-200{
    background: var(--red-200, #F3A399);
}
.bg-red-300{
    background: var(--red-300, #ED7566);
}
.bg-red-400{
    background: var(--red-400, #E74733);
}
.bg-red-500{
    background: var(--red-500, #E11900);
}
.bg-red-600{
    background: var(--red-600, #B41400);
}
.bg-red-700{
    background: var(--red-700, #870F00);
}
.bg-red-800{
    background: var(--red-800, #5A0A00);
}
.bg-red-900{
    background: var(--red-900, #2D0500);
}
.red-50{
    color: var(--red-50, #FCE8E6);
}
.red-100{
    color: var(--red-100, #F9D1CC);
}
.red-200{
    color: var(--red-200, #F3A399);
}
.red-300{
    color: var(--red-300, #ED7566);
}
.red-400{
    color: var(--red-400, #E74733);
}
.red-500{
    color: var(--red-500, #E11900);
}
.red-600{
    color: var(--red-600, #B41400);
}
.red-700{
    color: var(--red-700, #870F00);
}
.red-800{
    color: var(--red-800, #5A0A00);
}
.red-900{
    color: var(--red-900, #2D0500);
}

/* black color*/
.bg-black-50{
    background: var(--black-50, #E8E8E8);
}
.bg-black-100{
    background: var(--black-100, #D0D0D0);
}
.bg-black-200{
    background: var(--black-200, #A1A1A1);
}
.bg-black-300{
    background: var(--black-300, #727272);
}
.bg-black-400{
    background: var(--black-400, #434343);
}
.bg-black-500{
    background: var(--black-500, #141414);
}
.bg-black-600{
    background: var(--black-600, #101010);
}
.bg-black-700{
    background: var(--black-700, #0C0C0C);
}
.bg-black-800{
    background: var(--black-800, #080808);
}
.bg-black-900{
    background: var(--black-900, #040404);
}
.black-50{
    background: var(--black-50, #E8E8E8);
}
.black-100{
    color: var(--black-100, #D0D0D0);
}
.black-200{
    color: var(--black-200, #A1A1A1);
}
.black-300{
    color: var(--black-300, #727272);
}
.black-400{
    color: var(--black-400, #434343);
}
.black-500{
    color: var(--black-500, #141414);
}
.black-600{
    color: var(--black-600, #101010);
}
.black-700{
    color: var(--black-700, #0C0C0C);
}
.black-800{
    color: var(--black-800, #080808);
}
.black-900{
    color: var(--black-900, #040404);
}
/* Design system for Foundations color */
/* Primary Colors */
.primary-bg { background-color: #054268; }
.primary-text { color: #054268; }
/* Secondary Colors */
.secondary-bg { background-color: #8DC6E8; }
.secondary-text { color: #8DC6E8; }
/* black Colors */
.black-bg { background-color: #141414; }
.black-text { color: #141414; }
/* positive Colors */
.positive-bg { background-color: #06C167; }
.positive-text { color: #06C167; }
/* Warning Colors */
.Warning-bg { background-color: #FFC043; }
.Warning-text { color: #FFC043; }
/* Negative Colors */
.Negative-bg { background-color: #E11900; }
.Negative-text { color: #E11900; }
/* Design system for Primitives color */
/* gradient */
/* gradient navy-lightblue */
.gradient-navy-lightblue-bg {
    background: var(--gradient-navy-lightblue, radial-gradient(292.72% 89.17% at 13.16% 70.27%, #8DC6E8 0%, #043553 100%));
}
.gradient-navy-lightblue {
    background: var(--gradient-navy-lightblue, radial-gradient(292.72% 89.17% at 13.16% 70.27%, #8DC6E8 0%, #043553 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-lightblue-bg {
    background: var(--gradientx-lightblue, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #8DC6E8 0.03%, #D1E8F6 100%));
}
/* gradient primary */
.gradient-primary-bg {
    background: var(--gradient-primary, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #054268 0.03%, #8DC6E8 100%));
}
.gradient-primary {
    background: var(--gradient-primary, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #054268 0.03%, #8DC6E8 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* gradient black */
.gradient-black-bg {
    background: var(--gradient-black, radial-gradient(218.74% 84.63% at 16.24% 62.13%, #727272 0%, #010D15 100%));
}
.gradient-black {
    background: var(--gradient-black, radial-gradient(218.74% 84.63% at 16.24% 62.13%, #727272 0%, #010D15 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* gradient green */
.gradient-green-bg {
    background: var(--gradientx-green, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #06C167 0.03%, #9BE6C2 100%));
}
.gradient-green {
    background: var(--gradientx-green, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #06C167 0.03%, #9BE6C2 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* gradient yellow */
.gradient-yellow-bg {
    background: var(--gradientx-yellow, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #FFC043 0.03%, #FFE6B4 100%));
}
.gradient-yellow {
    background: var(--gradientx-yellow, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #FFC043 0.03%, #FFE6B4 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* gradient transparent */
.gradient-transparent-bg {
    background: var(--gradient-test, radial-gradient(89.15% 141.42% at 100.00% 0.00%, rgba(20, 20, 20, 0.00) 50%, rgba(20, 20, 20, 0.04) 100%));
}
.gradient-transparent {
    background: var(--gradient-test, radial-gradient(89.15% 141.42% at 100.00% 0.00%, rgba(20, 20, 20, 0.00) 50%, rgba(20, 20, 20, 0.04) 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}