@charset "utf-8";

:root {
    --color-primary: #EF151E; /* primary */
    --color-Bprimary: #C41700; /* primary banner */
    --color-Hprimary: #D7131B; /* primary hover */
    --color-Mprimary: rgba(239, 21, 30, 0.8); /* primary opacity 80% */
    --color-Lprimary: #FDE8E9; /* label background primary */
    --color-SLprimary: #FDDCDD; /* primary opacity 10% */
    --color-MLprimary: #FAB6B9; /* txt primary disabled */
    --color-SOprimary: #FDE8E9; /* primary soft */

    --color-bu-primary: #052E87; /* primary */
    --color-bu-Bprimary: #052E87; /* primary banner */
    --color-bu-Hprimary: #05297A; /* primary hover */
    --color-bu-Mprimary: rgba(5, 46, 135, 0.8); /* primary opacity 80% */
    --color-bu-Lprimary: #F1F4FD; /* primary opacity 20% */
    --color-bu-SLprimary: rgba(5, 46, 135, 0.1); /* primary opacity 10% */
    --color-bu-MLprimary: #B2BEDA; /* txt primary disabled */
    --color-bu-SOprimary: #F1F4FD; /* primary soft */

    --color-yl-primary: #FAA131; /* primary */
    --color-yl-Bprimary: #F5B020; /* primary banner */
    --color-yl-Hprimary: #EE8F11; /* primary hover */
    --color-yl-Mprimary: rgba(250, 161, 49, 0.8); /* primary opacity 80% */
    --color-yl-Lprimary: #FFEFBF; /* primary opacity 20% */
    --color-yl-SLprimary: rgba(250, 161, 49, 0.1); /* primary opacity 10% */
    --color-yl-MLprimary: #FFDD99; /* txt primary disabled */
    --color-yl-SOprimary: #FFEFBF; /* primary soft */

    --color-gr-primary: #006241; /* primary */
    --color-gr-Bprimary: #006241; /* primary banner */
    --color-gr-Hprimary: #00583B; /* primary hover */
    --color-gr-Mprimary: rgba(0, 98, 56, 0.8); /* primary opacity 80% */
    --color-gr-Lprimary: #E7F6F0; /* primary opacity 20% */
    --color-gr-SLprimary: rgba(0, 98, 56, 0.1); /* primary opacity 10% */
    --color-gr-MLprimary: #B0CEC4; /* txt primary disabled */
    --color-gr-SOprimary: #E7F6F0; /* primary soft */

    --color-black: #000;
    --color-Dark: #3C3E46;
    --color-TDark: #525463;
    --color-MDark: #828493;
    --color-gray: #9197AE;
    --color-middle: #73788C;
    --color-light: #A0A5B9;

    --color-BDark: #2B2D36;
    --color-BGray: #212D3F;
    --color-DGray: #4A5169;
    --color-MGray: #73788C;
    --color-SGray: #A0A5B9;
    --color-SLGray: #D2D4DE;
    --color-D4Gray: #6E7080;
    --color-D6Gray: #A6A8B3;
    --color-white: #FFFFFF;

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

    --color-red: #FF4747;
    --color-yellow: #F39034;
    --color-blue: #4969F0;
}

[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*="bgBPrimary"] {color:#fff; background-color:var(--color-Bprimary);}
[class*="bgcSLPrimary"] {background-color:var(--color-SLprimary);}
[class*="bgcSOPrimary"] {background-color:var(--color-SOprimary);}
[class*="labelcPrimary"] {color:#fff; background-color:var(--color-primary);}
[class*="labelcLPrimary"] {color:var(--color-primary); background-color:var(--color-Lprimary);}
[class*="linePrimary"] {color:var(--color-primary); border-color:var(--color-primary);}

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

.theme_yl [class*="cPrimary"] {color:var(--color-yl-primary);}
.theme_yl [class*="bgPrimary"] {color:#fff; background-color:var(--color-yl-primary);}
.theme_yl [class*="bgMPrimary"] {background-color:var(--color-yl-Mprimary);}
.theme_yl [class*="bgBPrimary"] {color:#fff; background-color:var(--color-yl-Bprimary);}
.theme_yl [class*="bgcSLPrimary"] {background-color:var(--color-yl-SLprimary);}
.theme_yl [class*="bgcSOPrimary"] {background-color:var(--color-yl-SOprimary);}
.theme_yl [class*="labelcPrimary"] {color:#fff; background-color:var(--color-yl-primary);}
.theme_yl [class*="labelcLPrimary"] {color:var(--color-yl-primary); background-color:var(--color-yl-Lprimary);}
.theme_yl [class*="linePrimary"] {color:var(--color-yl-primary); border-color:var(--color-yl-primary);}

.theme_gr [class*="cPrimary"] {color:var(--color-gr-primary);}
.theme_gr [class*="bgPrimary"] {color:#fff; background-color:var(--color-gr-primary);}
.theme_gr [class*="bgMPrimary"] {background-color:var(--color-gr-Mprimary);}
.theme_gr [class*="bgBPrimary"] {color:#fff; background-color:var(--color-gr-Bprimary);}
.theme_gr [class*="bgcSLPrimary"] {background-color:var(--color-gr-SLprimary);}
.theme_gr [class*="bgcSOPrimary"] {background-color:var(--color-gr-SOprimary);}
.theme_gr [class*="labelcPrimary"] {color:#fff; background-color:var(--color-gr-primary);}
.theme_gr [class*="labelcLPrimary"] {color:var(--color-gr-primary); background-color:var(--color-gr-Lprimary);}
.theme_gr [class*="linePrimary"] {color:var(--color-gr-primary); border-color:var(--color-gr-primary);}

[class*="bgPrimary"]:disabled {background-color:var(--color-MLprimary);}
.theme_yl [class*="bgPrimary"]:disabled {background-color:var(--color-yl-MLprimary);}
.theme_gr [class*="bgPrimary"]:disabled {background-color:var(--color-gr-MLprimary);}
.theme_bu [class*="bgPrimary"]:disabled {background-color:var(--color-bu-MLprimary);}

/* gray color */
[class*="cBDark"] {color:var(--color-BDark);}
[class*="cBGray"] {color:var(--color-BGray);}
[class*="cDGray"] {color:var(--color-DGray);}
[class*="cMGray"] {color:var(--color-MGray);}
[class*="cMDark"] {color:var(--color-MDark);}
[class*="cSGray"] {color:var(--color-SGray);}
[class*="cSLGray"] {color:var(--color-SLGray);}
[class*="cDDark"] {color:var(--color-D4Gray);}
[class*="cLDark"] {color:var(--color-D6Gray);}
[class*="cWhite"] {color:var(--color-white);}

[class*="cBack"] {color:var(--color-black);}
[class*="cDark"] {color:var(--color-Dark);}
[class*="bgDark"] {background-color:var(--color-Dark);}
[class*="bgTDark"] {background-color:var(--color-TDark);}
[class*="cTDark"] {color:var(--color-TDark);}

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

/* background color */
/* button[class*="bgLGray"] {background-color:var(--color-bgLGray);} */
button[class*="bgMGray"] {background-color:var(--color-bgMGray);}
button[class*="bgSGray"] {background-color:var(--color-bgSGray);}
    button[class*="bgTDark"] .txt_btn_name, button[class*="bgSGray"] [class^="txt_"] {color:#fff;}
button[class*="bgSGray"]:disabled {background-color:#E5E5EC;}
    button[class*="bgSGray"]:disabled .txt_btn_name {color:var(--color-bgSGray);}