@charset "utf-8";

:root {
    --color-primary: #4969F0; /* primary */
    --color-Mprimary: rgba(73, 105, 240, 0.8); /* primary opacity 80% */
    --color-Lprimary: #DBE1FC; /* primary opacity 20% */
    --color-SLprimary: rgba(73, 105, 240, 0.1); /* primary opacity 10% */

    --color-pr-primary: #904DF3; /* primary */
    --color-pr-Mprimary: rgba(144, 77, 243, 0.8); /* primary opacity 80% */
    --color-pr-Lprimary: #E9DBFD; /* primary opacity 20% */
    --color-pr-SLprimary: rgba(144, 77, 243, 0.1); /* primary opacity 10% */

    --color-mt-primary: #3BCDC8; /* primary */
    --color-mt-Mprimary: rgba(59, 205, 200, 0.8); /* primary opacity 80% */
    --color-mt-Lprimary: #D8F5F4; /* primary opacity 20% */
    --color-mt-SLprimary: rgba(59, 205, 200, 0.1); /* primary opacity 10% */

    --color-og-primary: #FF8806; /* primary */
    --color-og-Mprimary: rgba(255, 136, 6, 0.8); /* primary opacity 80% */
    --color-og-Lprimary: #FFE7CD; /* primary opacity 20% */
    --color-og-SLprimary: rgba(255, 136, 6, 0.1); /* primary opacity 10% */

    --color-bl-primary: #111111; /* primary */
    --color-bl-Mprimary: rgba(17, 17, 17, 0.8); /* primary opacity 80% */
    --color-bl-Lprimary: #CFCFCF; /* primary opacity 20% */
    --color-bl-SLprimary: rgba(17, 17, 17, 0.1); /* primary opacity 10% */

    --color-rd-primary: #A72B2A; /* primary */
    --color-rd-Mprimary: rgba(185, 85, 85, 1); /* primary opacity 80% */
    --color-rd-Lprimary: #EDD5D4; /* primary opacity 20% */
    --color-rd-SLprimary: rgba(185, 85, 85, 0.1); /* primary opacity 10% */

    /* new color - primary */
    --color-primary: #4969F0; /* primary */
    --color-Hprimary: #3A54C0; /* primary hover */
    --color-Aprimary: #2C3F90; /* primary active */
    --color-Bprimary: #F6F7FE; /* primary light bg */
    --color-Lprimary: #DBE1FC; /* primary label bg */

    /* blue */
    --blue-5: #F6F7FE; /* Light BG */
    --blue-10: #DBE1FC; /* Label BG */
    --blue-20: #B6C3F9;
    --blue-30: #92A5F6;
    --blue-40: #6D87F3;
    --blue-50: #4969F0; /* Main */
    --blue-60: #3A54C0; /* Hover */
    --blue-70: #2C3F90; /* Active */
    --blue-80: #1D2A60;
    --blue-90: #0F1530;

    /* red */
    --red-5: #FFF0F1; /* Light BG */
    --red-10: #FFE0E2; /* Label BG */
    --red-20: #F7B0B6;
    --red-30: #F38991;
    --red-40: #EF626D;
    --red-50: #EB3A48; /* Main */
    --red-60: #BC2F3A; /* Hover */
    --red-70: #8D232B; /* Active */
    --red-80: #5E171D;
    --red-90: #2F0C0E;

    /* new gray color */
    --gray-0: #fff; 
    --gray-5: #F8F8F8; 
    --gray-7: #F3F3F5; 
    --gray-10: #E9EAEC; 
    --gray-20: #DDDEE3; 
    --gray-30: #BCBEC6; 
    --gray-40: #8C8FA1; 
    --gray-50: #707488; 
    --gray-60: #575C71; 
    --gray-70: #464A5A; 
    --gray-80: #343744; 
    --gray-90: #23252D; 
    --gray-100: #111217; 

    --color-informal: #2C70F2;
    --color-success: #089D1F;
    --color-warning: #E05E00;
    --color-error: #EC4040;

    --color-black: #000;
    --color-dark: #4A5169;
    --color-gray: #9197AE;
    --color-middle: #73788C;
    --color-light: #A0A5B9;

    --color-BGray: #212D3F;
    --color-DGray: #4A5169;
    --color-MGray: #73788C;
    --color-SGray: #A0A5B9;
    --color-SLGray: #D2D4DE;
    --color-white: #FFFFFF;

    --color-bgLGray: #F8F8F8;
    --color-bgMGray: #F4F4F4;
    --color-bgSGray: #A0A5B9;

    --color-red: #FF4747;
    --color-yellow: #FFB320;
}

[class*="cPrimary"] {color:var(--color-primary);}
[class*="bgPrimary"] {color:#fff; background-color:var(--color-primary);}
[class*="bgLGray"] {background-color:var(--color-SLGray);}
[class*="bgMPrimary"] {color:#fff; background-color:var(--color-Mprimary);}
[class*="bgcSLPrimary"] {background-color:var(--color-SLprimary);}
[class*="labelcPrimary"] {color:#fff; background-color:var(--color-primary);}
[class*="labelcLPrimary"] {color:var(--color-primary); background-color:var(--color-Lprimary);}

.theme_bu [class*="cPrimary"] {color:var(--color-primary);}
.theme_bu [class*="bgPrimary"] {color:#fff; background-color:var(--color-primary);}
.theme_bu [class*="bgLGray"] {background-color:var(--color-SLGray);}
.theme_bu [class*="bgMPrimary"] {color:#fff; background-color:var(--color-Mprimary);}
.theme_bu [class*="bgcSLPrimary"] {background-color:var(--color-SLprimary);}
.theme_bu [class*="labelcPrimary"] {color:#fff; background-color:var(--color-primary);}
.theme_bu [class*="labelcLPrimary"] {color:var(--color-primary); background-color:var(--color-Lprimary);}

.theme_pr [class*="cPrimary"] {color:var(--color-pr-primary);}
.theme_pr [class*="bgPrimary"] {color:#fff; background-color:var(--color-pr-primary);}
.theme_pr [class*="bgMPrimary"] {background-color:var(--color-pr-Mprimary);}
.theme_pr [class*="bgcSLPrimary"] {background-color:var(--color-pr-SLprimary);}
.theme_pr [class*="labelcPrimary"] {color:#fff; background-color:var(--color-pr-primary);}
.theme_pr [class*="labelcLPrimary"] {color:var(--color-pr-primary); background-color:var(--color-pr-Lprimary);}

.theme_mt [class*="cPrimary"] {color:var(--color-mt-primary);}
.theme_mt [class*="bgPrimary"] {color:#fff; background-color:var(--color-mt-primary);}
.theme_mt [class*="bgMPrimary"] {background-color:var(--color-mt-Mprimary);}
.theme_mt [class*="bgcSLPrimary"] {background-color:var(--color-mt-SLprimary);}
.theme_mt [class*="labelcPrimary"] {color:#fff; background-color:var(--color-mt-primary);}
.theme_mt [class*="labelcLPrimary"] {color:var(--color-mt-primary); background-color:var(--color-mt-Lprimary);}

.theme_og [class*="cPrimary"] {color:var(--color-og-primary);}
.theme_og [class*="bgPrimary"] {color:#fff; background-color:var(--color-og-primary);}
.theme_og [class*="bgMPrimary"] {background-color:var(--color-og-Mprimary);}
.theme_og [class*="bgcSLPrimary"] {background-color:var(--color-og-SLprimary);}
.theme_og [class*="labelcPrimary"] {color:#fff; background-color:var(--color-og-primary);}
.theme_og [class*="labelcLPrimary"] {color:var(--color-og-primary); background-color:var(--color-og-Lprimary);}

.theme_bl [class*="cPrimary"] {color:var(--color-bl-primary);}
.theme_bl [class*="bgPrimary"] {color:#fff; background-color:var(--color-bl-primary);}
.theme_bl [class*="bgMPrimary"] {background-color:var(--color-bl-Mprimary);}
.theme_bl [class*="bgcSLPrimary"] {background-color:var(--color-bl-SLprimary);}
.theme_bl [class*="labelcPrimary"] {color:#fff; background-color:var(--color-bl-primary);}
.theme_bl [class*="labelcLPrimary"] {color:var(--color-bl-primary); background-color:var(--color-bl-Lprimary);}

.theme_rd [class*="cPrimary"] {color:var(--color-rd-primary);}
.theme_rd [class*="bgPrimary"] {color:#fff; background-color:var(--color-rd-primary);}
.theme_rd [class*="bgMPrimary"] {background-color:var(--color-rd-Mprimary);}
.theme_rd [class*="bgcSLPrimary"] {background-color:var(--color-rd-SLprimary);}
.theme_rd [class*="labelcPrimary"] {color:#fff; background-color:var(--color-rd-primary);}
.theme_rd [class*="labelcLPrimary"] {color:var(--color-rd-primary); background-color:var(--color-rd-Lprimary);}

/* gray color */
[class*="cBGray"] {color:var(--color-BGray);}
[class*="cDGray"] {color:var(--color-DGray);}
[class*="cMGray"] {color:var(--color-MGray);}
[class*="cSGray"] {color:var(--color-SGray);}
[class*="cSLGray"] {color:var(--color-SLGray);}
[class*="cWhite"] {color:var(--color-white);}

/* supporting color */
[class*="cRed"] {color:var(--color-red);}
[class*="cYellow"] {color:var(--color-yellow);}

/* background color */
/* button[class*="bgLGray"] {background-color:var(--color-bgLGray);} */
button[class*="bgMGray"] {background-color:var(--color-bgMGray);}
    button[class*="bgMGray"] .txt_btn_name {color:var(--gray-60);}
button[class*="bgSGray"] {background-color:var(--color-bgSGray);}