:root {
    --orange100: #eb6124;
    --orange90: #ff793e;
    --orange70: #ffba9c;
    --orange50: #fff1ea;
    --orange10: #ffb6962b;
    --orangeBorder: solid 1px #eb6124;
    --orangeDefault: #e1eeff30;
    --blue100: #4b90e5;
    --blue90: #4a8ee2;
    --blue70: #afd3ff;
    --blue50: #e1eeff;
    --blue20: #f3f8ff;
    --blue10: #e1eeff54;
    --blueBorder: solid 1px #5898e7;
    --blueDefault: #6e6e6e;
    --gray100: #f7d53a;
    --gray90: #eecd32;
    --gray70: #ffdb30;
    --gray50: #3e3e3e;
    --gray10: #e1eeff54;
    --grayBorder: solid 1px #ffdb30;
    --grayDefault: #ffffff;
}

/*################## ORANGE THEME #############################################*/
.orange .color100 {
    color: var(--orange100);
}

.orange .bg100 {
    background: var(--orange100) !important;
    color: white !important;
}

.orange .color90 {
    color: var(--orange90);
}

.orange .bg90 {
    background: var(--orange90) !important;
    color: white !important;
}

.orange .searchSec, .orange .card .product_shop_price .product_price, .orange .product_shop .product_shop_price .product_price, .orange .post-btn {
    background: var(--orange100);
    color:white;
}

.orange .catCon .middle .text {
    background: var(--orange90);
    color: white;
}

.orange #cmpIntroCon section .row p, .orange #cmpIntroCon section .row p {
    color: var(--orangeDefault);
}

.orange input[type="text"], .orange input[type="password"], .orange button {
    border: solid 1px var(--orange70);
}

.orange .btnSearchCon, .orange .btnSearchCon {
    background-color: var(--orange100);
    border: var(--orangeBorder);
}

.orange .offcanvas-title {
    color: var(--orange100);
}

.orange .spinner, .orange .spinner2, .orange #pLoading {
    border-top-color: var(--orange100);
}

.orange .spinner {
    background-color: var(--orange10);
}

.orange #searchCon, .orange #inptSearch, .orange .searchSec, .orange #cmpIntroCon {
    background-color: var(--orange50);
    color: white;
}

.orange .down:after {
    border-color: var(--orange90) var(--orange90) transparent transparent;
}

/*################## BLUE THEME #############################################*/
.blue .bg100 {
    background: var(--blue100) !important;
    color: white !important;
}

.blue .color90 {
    color: var(--blue90);
}

.blue .bg90 {
    background: var(--blue90) !important;
    color:white !important;
}

.blue .color100 {
    color: var(--blue100);
}

.blue .bg100 {
    background: var(--blue100) !important;
}
.blue .searchSec {
    background:none;
}

.blue .card .product_shop_price .product_price, .blue .product_shop .product_shop_price .product_price, .blue .post-btn {
    background: var(--blue100);
    color: white;
}

.blue .catCon .middle .text {
    background: var(--blue90);
    color: white;
}

.blue #cmpIntroCon section .row p, .blue #cmpIntroCon section .row p span {
    color: var(--blueDefault) !important;
}

.blue input[type="text"], .blue input[type="password"], .blue button:has(:not(.modal-footer)), .blue .btn:has(:not(.modal-footer)) {
    border: solid 1px var(--blue70);
}

.blue .btnSearchCon, .blue .btnSearchCon {
    background-color: var(--blue100);
    border: var(--blueBorder);
}

.blue .offcanvas-title {
    color: var(--blue100);
}

.blue .spinner, .blue .spinner2, .blue #pLoading {
    border-top-color: var(--blue100);
}

.blue .spinner {
    background-color: var(--blue10);
}

.blue #searchCon, .blue #cmpIntroCon {
    background-color: var(--blue50);
    color:white;
}

.blue #inptSearch {
    background-color: var(--blue20);
}

.blue .arcDown:after {
    border-color: var(--blue90) var(--blue90) transparent transparent;
}



/*################## GRAY THEME #############################################*/
.gray .bg100 {
    background: var(--gray100) !important;
    color: black !important;
}

.gray .color90 {
    color: var(--gray90);
}

.gray .bg90 {
    background: var(--gray90) !important;
    color:black !important;
}

.gray .color100 {
    color: var(--gray100);
}

.gray .searchSec, .gray .card .product_shop_price .product_price, .gray .product_shop .product_shop_price .product_price, .gray .post-btn {
    background: var(--gray100);
    color:black;
}

.gray .catCon .middle .text {
    background: var(--gray90);
    color: white;
}

.gray #cmpIntroCon section .row p, .gray #cmpIntroCon section .row p span {
    color: var(--grayDefault) !important;
}

.gray input[type="text"], .gray input[type="password"], .gray button {
    border: solid 1px var(--gray70);
    color:black;
}

.gray .btnSearchCon, .gray .btnSearchCon {
    background-color: var(--gray100);
    border: var(--grayBorder);
}

.gray .offcanvas-title {
    color: var(--gray100);
}

.gray .spinner, .gray .spinner2, .gray #pLoading {
    border-top-color: var(--gray100);
}

.gray .spinner {
    background-color: var(--gray10);
}

.gray #searchCon, .gray #inptSearch, .gray .searchSec, .gray #cmpIntroCon {
    background-color: var(--gray50);
    color: black;
}

.gray .down:after {
    border-color: var(--gray90) var(--gray90) transparent transparent;
}
.gray #loginPage .d-flex, .gray #getSmsModal .d-flex, .gray #loginByMobile .d-flex, .gray #loginByPw .d-flex, .gray #quickSetPw .d-flex, .gray #registerSec, .gray #sendCodeSec {
    background: var(--gray50);
}
    .gray #loginPage *, .gray #getSmsModal *, .gray #loginByMobile *, .gray #loginByPw *, .gray #quickSetPw *, .gray #registerSec *, .gray #sendCodeSec *{
        color: var(--gray90);
    }
.gray span.text-danger, .gray p.text-danger {
    color: white !important;
}
.gray #spnChangePwTimer{
    color:white;
}