:root {
    --mainColor: #007aff;
    --mainColor-rgb: 0, 122, 255;
    --mainonColor: #006ada;
    --maingradient: linear-gradient(45deg, #59d7bf, #2388f2);
    --secondColor: #0c0287;
    --secondtxtColor: #317daf;;
    --barColor: #383f58;
    --pointtxtColor: #fe4e13;
    --mainlineonColor: #dcf1f4;
    --mainlineon2Color: #e5f0f2;
    --yellowColor: #f9b618;
    --subColor: #000;
    --baseColor: #414141;
    --baseNeonColor: #e3e3e3;
    --orangeColor: #fd8800;
    --blueColor: #007fff;
    --purpleColor: #a458e4;
    --grayDeepDarkColor: #2a3138;
    --grayDarkColor: #3c4651;
    --grayLightColor: #8d96a1;
    --grayColor: #556372;
    --grayColor-10: #868686;
    --grayColor-20: #313131;
    --redColor: #f03150;
    --darkRedColor: #d91a00;
    --redNeonColor: #fdd5de;
    --greenColor: #209788;
    --sgwriteColor: #418386;
    --SmtresveColor: #5ec2d3;
    
    
	--gray-dark: #414141;
	--gray-100: #f5f7fa;
	--gray-100-rgb: 245, 247, 250;
	--gray-200: #edf0f5;
	--gray-300: #dde3ed;
	--gray-400: #ced4da;
	--gray-400-rgb: 206, 212, 218;
	--gray-500: #adb5bd;
	--gray-600: #74788d;
}

.mainColor {color: var(--mainColor);}
.mainlineColor {color: var(--grayLightColor);}
.red {color:var(--redColor) !important;}
.gray {color:var(--grayColor) !important;}
.gray2 {color:var(--grayColor-10) !important;}
.gray3 {color:var(--grayColor-20) !important;}
.blue {color:var(--blueColor) !important;}
.black {color:#000 !important;}
.white {color:#fff !important;}
.white {color:#fff !important;}
.pink {color:#df5cf2 !important;}
.yellow {color:#e9b707 !important;}
.orange {color:var(--orangeColor) !important;}
.green {color:var(--greenColor) !important;}
.purple {color:var(--purpleColor) !important;}
.emerald {color:#26cec8 !important;}
.link {color: #4a90e2 !important; text-decoration: underline !important;}
.bold {font-weight: bold !important;}

/* background color */
.bgMain {background-color: var(--mainColor) !important; color: #fff !important;}
.bgGray {background-color: var(--gray-100);}
.main-bg {background-color:#5060b3 !important;}
.white-bg {background-color:#fff !important;}
.gray-bg {background-color:var(--grayColor) !important;}
.navy-bg {background-color:var(--barColor) !important;}

.bgMainGra {position: relative; background: linear-gradient(125deg, #59d7bf 3%, #2388f2 50%); z-index: 1; color: #fff;}
.bgMainGra:before {content:''; position: absolute; top:0; left:0; right:0; bottom: 0; background: url(/static/images/common/bg_dimm.png) no-repeat; background-size: 300% auto; background-position: center center; z-index: -1;
										-webkit-mask-image: linear-gradient(125deg, rgba(0,0,0,.6) 35%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(125deg, rgba(0,0,0,.6) 35%, rgba(0,0,0,1) 100%);}




/* border-left */
.bd-l-orange {border-left-color: var(--orangeColor) !important;}
.bd-l-blue {border-left-color: var(--blueColor) !important;}
.bd-l-purple {border-left-color: var(--purpleColor) !important;}
.bd-l-gray {border-left-color: var(--grayColor) !important;}
.bd-l-red {border-left-color: var(--redColor) !important;}
.bd-l-darkRed {border-left-color: var(--darkRedColor) !important;}
.bd-l-black {border-left-color: var(--baseColor) !important;}