/* NOTE ALL Color */
.bg-blue-1{background-color: var(--blue-1);}
.bg-blue-l-rgb{background-color: var(--blue-1-RGB);}
.bg-blue-l-lg{background-color: var(--blue-1-LG);}
.bg-blue-2{background-color: var(--blue-2);}
.bg-blue-2-rgb{background-color: var(--blue-2-RGB);}
.bg-blue-2-lg{background-color: var(--blue-2-LG);}
.bg-blue-3{background-color: var(--blue-3);}
.bg-blue-3-rgb{background-color: var(--blue-3-RGB);}
.bg-blue-3-lg{background-color: var(--blue-3-LG);}
.bg-black-1{background-color: var(--black-1);}
.bg-black-l-rgb{background-color: var(--black-1-RGB);}
.bg-black-l-lg{background-color: var(--black-1-LG);}
.bg-black-2{background-color: var(--black-2);}
.bg-black-2-rgb{background-color: var(--black-2-RGB);}
.bg-black-2-lg{background-color: var(--black-2-LG);}
.bg-black-3{background-color: var(--black-3);}
.bg-black-3-rgb{background-color: var(--black-3-RGB);}
.bg-black-3-lg{background-color: var(--black-3-LG);}
.bg-red-1-rgb{background-color: var(--red-1-RGB);}
.bg-red-1-lg{background-color: var(--red-1-LG);}
.bg-yellow-1{background-color: var(--yellow-1);}
.bg-yellow-1-rgb{background-color: var(--yellow-1-RGB);}
.bg-yellow-1-lg{background-color: var(--yellow-1-LG);}
.bg-green-1{background-color: var(--green-1);}
.bg-green-1-rgb{background-color: var(--green-1-RGB);}
.bg-green-1-lg{background-color: var(--green-1-LG);}
.bg-gray-1{background-color: var(--gray-1);}
.bg-gray-1-rgb{background-color: var(--gray-1-RGB);}
.bg-gray-1-lg{background-color: var(--gray-1-LG);}
.bg-gray-2{background-color: var(--gray-1);}
.bg-gray-2-rgb{background-color: var(--gray-2-RGB);}
.bg-gray-2-lg{background-color: var(--gray-2-LG);}

/* NOTE btn */
.btn.bg-blue-1{background-color: var(--blue-1);}
.btn.bg-blue-l-rgb{background-color: var(--blue-1-RGB);}
.btn.bg-blue-l-lg{background-color: var(--blue-1-LG);}
.btn.bg-blue-2{background-color: var(--blue-2);}
.btn.bg-blue-2-rgb{background-color: var(--blue-2-RGB);}
.btn.bg-blue-2-lg{background-color: var(--blue-2-LG);}
.btn.bg-blue-3{background-color: var(--blue-3);}
.btn.bg-blue-3-rgb{background-color: var(--blue-3-RGB);}
.btn.bg-blue-3-lg{background-color: var(--blue-3-LG);}
.btn.bg-black-1{background-color: var(--black-1);}
.btn.bg-black-l-rgb{background-color: var(--black-1-RGB);}
.btn.bg-black-l-lg{background-color: var(--black-1-LG);}
.btn.bg-black-2{background-color: var(--black-2);}
.btn.bg-black-2-rgb{background-color: var(--black-2-RGB);}
.btn.bg-black-2-lg{background-color: var(--black-2-LG);}
.btn.bg-black-3{background-color: var(--black-3);}
.btn.bg-black-3-rgb{background-color: var(--black-3-RGB);}
.btn.bg-black-3-lg{background-color: var(--black-3-LG);}
.btn.bg-red-1{background-color: var(--red-1);}
.btn.bg-red-1-rgb{background-color: var(--red-1-RGB);}
.btn.bg-red-1-lg{background-color: var(--red-1-LG);}
.btn.bg-yellow-1{background-color: var(--yellow-1);}
.btn.bg-yellow-1-rgb{background-color: var(--yellow-1-RGB);}
.btn.bg-yellow-1-lg{background-color: var(--yellow-1-LG);}
.btn.bg-green-1{background-color: var(--green-1);}
.btn.bg-green-1-rgb{background-color: var(--green-1-RGB);}
.btn.bg-green-1-lg{background-color: var(--green-1-LG);}
.btn.bg-gray-1{background-color: var(--gray-1);}
.btn.bg-gray-1-rgb{background-color: var(--gray-1-RGB);}
.btn.bg-gray-1-lg{background-color: var(--gray-1-LG);}
.btn.bg-gray-2{background-color: var(--gray-1);}
.btn.bg-gray-2-rgb{background-color: var(--gray-2-RGB);}
.btn.bg-gray-2-lg{background-color: var(--gray-2-LG);}

/* NOTE btn-small */
.btn-small.bg-blue-1{background-color: var(--blue-1);}
.btn-small.bg-blue-l-rgb{background-color: var(--blue-1-RGB);}
.btn-small.bg-blue-l-lg{background-color: var(--blue-1-LG);}
.btn-small.bg-blue-2{background-color: var(--blue-2);}
.btn-small.bg-blue-2-rgb{background-color: var(--blue-2-RGB);}
.btn-small.bg-blue-2-lg{background-color: var(--blue-2-LG);}
.btn-small.bg-blue-3{background-color: var(--blue-3);}
.btn-small.bg-blue-3-rgb{background-color: var(--blue-3-RGB);}
.btn-small.bg-blue-3-lg{background-color: var(--blue-3-LG);}
.btn-small.bg-black-1{background-color: var(--black-1);}
.btn-small.bg-black-l-rgb{background-color: var(--black-1-RGB);}
.btn-small.bg-black-l-lg{background-color: var(--black-1-LG);}
.btn-small.bg-black-2{background-color: var(--black-2);}
.btn-small.bg-black-2-rgb{background-color: var(--black-2-RGB);}
.btn-small.bg-black-2-lg{background-color: var(--black-2-LG);}
.btn-small.bg-black-3{background-color: var(--black-3);}
.btn-small.bg-black-3-rgb{background-color: var(--black-3-RGB);}
.btn-small.bg-black-3-lg{background-color: var(--black-3-LG);}
.btn-small.bg-red-1{background-color: var(--red-1);}
.btn-small.bg-red-1-rgb{background-color: var(--red-1-RGB);}
.btn-small.bg-red-1-lg{background-color: var(--red-1-LG);}
.btn-small.bg-yellow-1{background-color: var(--yellow-1);}
.btn-small.bg-yellow-1-rgb{background-color: var(--yellow-1-RGB);}
.btn-small.bg-yellow-1-lg{background-color: var(--yellow-1-LG);}
.btn-small.bg-green-1{background-color: var(--green-1);}
.btn-small.bg-green-1-rgb{background-color: var(--green-1-RGB);}
.btn-small.bg-green-1-lg{background-color: var(--green-1-LG);}
.btn-small.bg-gray-1{background-color: var(--gray-1);}
.btn-small.bg-gray-1-rgb{background-color: var(--gray-1-RGB);}
.btn-small.bg-gray-1-lg{background-color: var(--gray-1-LG);}
.btn-small.bg-gray-2{background-color: var(--gray-1);}
.btn-small.bg-gray-2-rgb{background-color: var(--gray-2-RGB);}
.btn-small.bg-gray-2-lg{background-color: var(--gray-2-LG);}


/* NOTE Pure Color */
.bg-black-1{background-color: var(--black-1);}
.bg-black-2{background-color: var(--black-2);}
.bg-black-3{background-color:var(--black-3);}
.bg-red-1{background-color: var(--red-1);}
.bg-yellow-1{background-color: var(--yellow-1);}
.bg-orange-1{background-color: var(--orange-1);}
.bg-green-1{background-color: var(--green-1);}
.bg-gray-1{background-color: var(--gray-1);}
.bg-gray-2{background-color: var(--gray-1);}

.bg-total { background-color:#fff; }
.bg-nodata{ background-color:var(--nodata); }
.bg-level0{ background-color:var(--level0); }
.bg-level1{ background-color:var(--level1); }
.bg-level2{ background-color:var(--level2); }
.bg-level3{ background-color:var(--level3); }
.bg-level4{ background-color:var(--level4); }

.cl-total {color:#fff; }
.cl-nodata{color:var(--nodata); }
.cl-level0{color:var(--level0); }
.cl-level1{color:var(--level1); }
.cl-level2{color:var(--level2); }
.cl-level3{color:var(--level3); }
.cl-level4{color:var(--level4); }


/* NOTE Font Color */
.cl-blue-1{color: var(--blue-1);}
.cl-blue-2{color: var(--blue-2);}
.cl-blue-3{color: var(--blue-3);}
.cl-black-1{color: var(--black-1);}
.cl-black-2{color: var(--black-2);}
.cl-black-3{color: var(--black-3);}
.cl-red-1{color: var(--red-1);}
.cl-yellow-1{color: var(--yellow-1);}
.cl-orange-1{color: var(--orange-1);}
.cl-green-1{color: var(--green-1);}
.cl-gray-1{color: var(--gray-1);}
.cl-gray-2{color: var(--gray-1);}





:root{
  --black-1     : #252A31;
  --black-1-RGB : RGB(37,42,49);
  --black-1-LG  : LINEAR-GRADIENT(90DEG, RGBA(37,42,49,1) 0%, RGBA(37,42,49,1) 100%);

  --black-2     : #20252C;
  --black-2-RGB : RGB(32,37,44);
  --black-2-LG  : LINEAR-GRADIENT(90DEG, RGBA(32,37,44,1) 0%, RGBA(32,37,44,1) 100%);

  --black-3     : #313439;
  --black-2-RGB : RGB(49,52,57);
  --black-2-LG  : LINEAR-GRADIENT(90DEG, RGBA(49,52,57,1) 0%, RGBA(32,37,44,1) 35%);

  --blue-1      : #2196F3;
  --blue-1-RGB  : RGB(33,150,243);
  --blue-1-LG   : LINEAR-GRADIENT(90DEG, RGBA(33,150,243,1) 0%, RGBA(33,150,243,1) 100%);

  --blue-2      : #3476FF;
  --blue-2-RGB  : RGB(52,118,255);
  --blue-2-LG   : LINEAR-GRADIENT(90DEG, RGBA(52,118,255,1) 0%, RGBA(52,118,255,1) 100%);

  --blue-3      : #3543CE;
  --blue-3-RGB  : RGB(53,67,206);
  --blue-3-LG   : LINEAR-GRADIENT(90DEG, RGBA(53,67,206,1) 0%, RGBA(53,67,206,1) 100%);

  --red-1       : #F94040;
  --red-1-RGB   : RGB(249,64,64);
  --red-1-LG    : LINEAR-GRADIENT(90DEG, RGBA(249,64,64,1) 0%, RGBA(249,64,64,1) 100%);

  --yellow-1    : #FFC600;
  --yellow-1-RGB: RGB(255,198,0);
  --yellow-LG   : LINEAR-GRADIENT(90DEG, RGBA(255,198,0,1) 0%, RGBA(255,198,0,1) 100%);

  --green-1     : #2FE4AD;
  --green-1-RGB : RGB(47,228,173);
  --green-1-LG  : LINEAR-GRADIENT(90DEG, RGBA(47,228,173,1) 0%, RGBA(47,228,173,1) 100%);

  --gray-1      : #9E9E9E;
  --gray-1-RGB  : RGB(158,158,158);
  --gray-1-LG   : LINEAR-GRADIENT(90DEG, RGBA(158,158,158,1) 0%, RGBA(158,158,158,1) 100%);

  --gray-2      : #DDDDDD;
  --gray-2-RGB  : RGB(221,221,221);
  --gray-2-LG   : LINEAR-GRADIENT(90DEG, RGBA(221,221,221,1) 0%, RGBA(221,221,221,1) 100%);


  --orange-1    : #FF9800;

  --nodata:#9E9E9E;
  --level0:#3476FF;
  --level1:#2FE4AD;
  --level2:#FFC600;
  --level3:#FF9800;
  --level4:#F94040;

  --fluxup:#FF0000;
  --fluxdown:#00A652;
  --fluxsame:#9E9E9E;
}