:root{
    --gp-b0: #1D3A6F; --gp-b1: #2B477B;  --gp-b2: #3E5889;  --gp-b3: #5670A0;  --gp-b4: #6C84B0;  --gp-b5: #8B9EBF;  --gp-b6: #ADB9CE;  --gp-b7: #C1CCDF;  --gp-b8: #D1DAEA;  --gp-b9: #E4ECFA;
    --gp-o0: #F89720;  --gp-o1: #F6A43F;  --gp-o2: #F5B15C;  --gp-o3: #F5B96C;  --gp-o4: #F6C689;  --gp-o5: #F5CF9D;  --gp-o6: #F4D5AC;  --gp-o7: #F4DCBB;  --gp-o8: #F4E5CF;  --gp-o9: #F9F1E6;
    --gp-g0: #379644;  --gp-g1: #4DAD5B;  --gp-g2: #5DBF6C;  --gp-g3: #6DCB7B;  --gp-g4: #81DB8E;  --gp-g5: #97E9A4;  --gp-g6: #AEF4B9;  --gp-g7: #C2FFCC;  --gp-g8: #DEFFE3;  --gp-g9: #F0FFF2;
    --gp-n0: #303030;  --gp-n1: #404040;  --gp-n2: #505050;  --gp-n3: #707070;  --gp-n4: #909090;  --gp-n5: #B0B0B0;  --gp-n6: #D0D0D0;  --gp-n7: #D9D9D9;  --gp-n8: #F0F0F0;  --gp-n9: #F6F6F6;
    --gp-xg0: #54A877;  --gp-xg1: #65B285;  --gp-xg2: #70BA8F;  --gp-xg3: #7BC399;  --gp-xg4: #86CEA4;  --gp-xg5: #95D8B1;  --gp-xg6: #A5E1BE;  --gp-xg7: #B7EACC;  --gp-xg8: #CDF2DC;  --gp-xg9: #DCFBE9;
}
/* --------------new color-------------------- */
.clr-white{color: white !important;}.clr-red{color: #f24949 !important;}.clr-cyan{color: #99ffbd !important;}.clr-yellow{color: #ffe88c !important;}.clr-sky{color: #168ee3 !important;}
.clr-b0{color: var(--gp-b0) !important;}.clr-b1{color: var(--gp-b1) !important;}.clr-b2{color: var(--gp-b2) !important;}.clr-b3{color: var(--gp-b3) !important;}.clr-b4{color: var(--gp-b4) !important;}.clr-b5{color: var(--gp-b5) !important;}.clr-b6{color: var(--gp-b6) !important;}.clr-b7{color: var(--gp-b7) !important;}.clr-b8{color: var(--gp-b8) !important;}.clr-b9{color: var(--gp-b9) !important;}
.clr-o0{color: var(--gp-o0) !important;}.clr-o1{color: var(--gp-o1) !important;}.clr-o2{color: var(--gp-o2) !important;}.clr-o3{color: var(--gp-o3) !important;}.clr-o4{color: var(--gp-o4) !important;}.clr-o5{color: var(--gp-o5) !important;}.clr-o6{color: var(--gp-o6) !important;}.clr-o7{color: var(--gp-o7) !important;}.clr-o8{color: var(--gp-o8) !important;}.clr-o9{color: var(--gp-o9) !important;}
.clr-g0{color: var(--gp-g0) !important;}.clr-g1{color: var(--gp-g1) !important;}.clr-g2{color: var(--gp-g2) !important;}.clr-g3{color: var(--gp-g3) !important;}.clr-g4{color: var(--gp-g4) !important;}.clr-g5{color: var(--gp-g5) !important;}.clr-g6{color: var(--gp-g6) !important;}.clr-g7{color: var(--gp-g7) !important;}.clr-g8{color: var(--gp-g8) !important;}.clr-g9{color: var(--gp-g9) !important;}
.clr-n0{color: var(--gp-n0) !important;}.clr-n1{color: var(--gp-n1) !important;}.clr-n2{color: var(--gp-n2) !important;}.clr-n3{color: var(--gp-n3) !important;}.clr-n4{color: var(--gp-n4) !important;}.clr-n5{color: var(--gp-n5) !important;}.clr-n6{color: var(--gp-n6) !important;}.clr-n7{color: var(--gp-n7) !important;}.clr-n8{color: var(--gp-n8) !important;}.clr-n9{color: var(--gp-n9) !important;}.clr-bb-b{border-bottom: 1px solid var(--gp-b0);}
.clr-bb-o{border-bottom: 1px solid var(--gp-o1);}.clr-bb-n{border-bottom: 1px solid var(--gp-n7);}

.bgc-white{background-color: white;}.bgc-red{background-color: #f24949;}
.bgc-b0{background-color: var(--gp-b0);}.bgc-b1{background-color: var(--gp-b1);}.bgc-b2{background-color: var(--gp-b2);}.bgc-b3{background-color: var(--gp-b3);}.bgc-b4{background-color: var(--gp-b4);}.bgc-b5{background-color: var(--gp-b5);}.bgc-b6{background-color: var(--gp-b6);}.bgc-b7{background-color: var(--gp-b7);}.bgc-b8{background-color: var(--gp-b8);}.bgc-b9{background-color: var(--gp-b9);}
.bgc-o0{background-color: var(--gp-o0);}.bgc-o1{background-color: var(--gp-o1);}.bgc-o2{background-color: var(--gp-o2);}.bgc-o3{background-color: var(--gp-o3);}.bgc-o4{background-color: var(--gp-o4);}.bgc-o5{background-color: var(--gp-o5);}.bgc-o6{background-color: var(--gp-o6);}.bgc-o7{background-color: var(--gp-o7);}.bgc-o8{background-color: var(--gp-o8);}.bgc-o9{background-color: var(--gp-o9);}
.bgc-g0{background-color: var(--gp-g0);}.bgc-g1{background-color: var(--gp-g1);}.bgc-g2{background-color: var(--gp-g2);}.bgc-g3{background-color: var(--gp-g3);}.bgc-g4{background-color: var(--gp-g4);}.bgc-g5{background-color: var(--gp-g5);}.bgc-g6{background-color: var(--gp-g6);}.bgc-g7{background-color: var(--gp-g7);}.bgc-g8{background-color: var(--gp-g8);}.bgc-g9{background-color: var(--gp-g9);}
.bgc-n0{background-color: var(--gp-n0);}.bgc-n1{background-color: var(--gp-n1);}.bgc-n2{background-color: var(--gp-n2);}.bgc-n3{background-color: var(--gp-n3);}.bgc-n4{background-color: var(--gp-n4);}.bgc-n5{background-color: var(--gp-n5);}.bgc-n6{background-color: var(--gp-n6);}.bgc-n7{background-color: var(--gp-n7);}.bgc-n8{background-color: var(--gp-n8);}.bgc-n9{background-color: var(--gp-n9);}
/* ------------------------------------------------------------------------------------------ button color ------------------------------------------------------------------------------- */
.clr-btn-disable{color:#ffffff;background-color: var(--gp-n8);}
.clr-btn-b0{color: var(--gp-n8);background-color: var(--gp-b0);}
.clr-btn-b1{color: var(--gp-n9);background-color: var(--gp-b3);}
.clr-btn-b2{color: var(--gp-b0);background-color: var(--gp-b7);}
.clr-btn-b3{color: var(--gp-b0);background-color: var(--gp-n8);}
.clr-btn-o0{color: var(--gp-n8);background-color: var(--gp-o0);}
.clr-btn-o1{color: var(--gp-n9);background-color: var(--gp-o3);}
.clr-btn-o2{color: var(--gp-o0);background-color: var(--gp-o7);}
.clr-btn-o3{color: var(--gp-o0);background-color: var(--gp-n8);}
.clr-btn-g0{color: var(--gp-n8);background-color: var(--gp-g0);}
.clr-btn-g1{color: var(--gp-n9);background-color: var(--gp-g3);}
.clr-btn-g2{color: var(--gp-g0);background-color: var(--gp-g7);}
.clr-btn-g3{color: var(--gp-g0);background-color: var(--gp-n8);}
/* ------------------------------------------------------------------------------------------ border color ------------------------------------------------------------------------------- */
.border-r{border-color: #f24949;}
.border-o{border-color: #febb50;}
.border-g{border-color: #bfe95a;}
.border-b{border-color: #638ae6;}
.border-y{border-color: #ffe88c;}
.border-c{border-color: #99ffbd;}
.border-grey{border-color: #d4d4d4;}