:root {
    --light:#74829c;
    --dark:#212529;
    --mrbg: #fffcf6;
    --eee: #eeeeee;
    --mrbg2: #f2f3f5;
    --white: #ffffff;
    --gray-dark:#313131;
    --yellow:#FFB700;
    --yellow-light:#f8d57b;
    --yellow-light2:#f8eed4;
    --yellow-light3:#f9e9be;
    --yellow-dark:#ffc400;
    --orange:#ff8500;
    --orange-light:#fbf2e9;
    --orange-dark:#ff6a00;
    --blue: #006af7;
    --blue-light: #e0f4f5; 
    --blue-light2:#eef6ff;
    --red: #d50002; 
    --red-light: #fdeced; 
    --pink: #f45c8d; 
    --pink-light: #f7e5db; 
    --green: #38a412; 
    --green-light:#e4f5eb;
    --green-dark: #0f9177;
    --purple:#6659b0;
    --purple-dark:#7a0087;
    --purple-light:#6366b7;
    --purple-light2:#dfe0f7;
    --zong:#be5b03;
}


/*文字颜色*/
.color-dark{color:var(--dark)}
.color-light{color:var(--light)}
.color-white{color:var(--white)}
.color-333{color:#333}
.color-666{color:#666}
.color-red{color:var(--red)}
.color-blue{color:var(--blue)}
.color-green{color:var(--green)}
.color-orange{color:var(--orange)}
.color-orange-dark{color:var(--orange-dark)}
.color-yellow{color:var(--yellow)}
.color-purple{color:var(--purple)}
.color-pink{color:var(--pink)}
.color-blue-dark{color:var(--blue-dark)}
.color-blue-hc-light{color:var(--blue-hc-light);}
.color-blue-hc{color:var(--blue-hc);}
.color-blue-hc2{color:var(--blue-hc2);}
.color-blue-hc3{color:var(--blue-hc3);}
.color-blue-hc-dark{color:var(--blue-hc-dark);}
.color-zong{color:var(--zong)}

/*反白*/
.hover-fb:hover{background-color:#fff; }

/*背景色*/
.bg-white{background-color:var(--white)}
.bg-eee{background-color:var(--eee)}
.bg-mrbg{background-color:var(--mrbg)}
.bg-mrbg2{background-color:var(--mrbg2)}
.bg-black{background:#000000;}
.bg-gray-dark{background:var(--gray-dark);}
.bg-blue{background-color:var(--blue)}
.bg-blue-light{background-color:var(--blue-light)}
.bg-orange{background-color:var(--orange)}
.bg-green{background-color:var(--green)}
.bg-green-light{background-color:var(--green-light)}
.bg-red{background-color:var(--red)}
.bg-yellow{background-color:var(--yellow)} 
.bg-yellow-dark{background-color:var(--yellow-dark)} 
.bg-purple{background-color:var(--purple)}
.bg-purple-dark{background-color:var(--purple-dark)} 
.bg-purple-light{background-color:var(--purple-light)} 
.bg-pink{background-color:var(--pink)}

/*按钮*/
.btn-blue{background-color:var(--blue); border:1px solid var(--blue);}
.btn-blue.hover-fb:hover{color:var(--blue)}
.btn-yellow{background-color:var(--yellow); border:1px solid var(--yellow); }
.btn-yellow.hover-fb:hover{color:var(--yellow)}
.btn-purple{background-color:var(--purple); border:1px solid var(--purple);}
.btn-purple.hover-fb:hover{color:var(--purple)}
.btn-red{background-color:var(--red); border:1px solid var(--red);}
.btn-red.hover-fb:hover{color:var(--red)}
.btn-green{background-color:var(--green); border:1px solid var(--green);}
.btn-green.hover-fb:hover{color:var(--green)}
.btn-gray{background-color:var(--gray-666); border:1px solid var(--gray-666);}
.btn-gray.hover-fb:hover{color:var(--gray-666)}
.btn-orange{background-color:var(--orange); border:1px solid var(--orange);}
.btn-orange.hover-fb:hover{color:var(--orange)}
 
/*背景文字搭配*/
.dapei-blue{background:var(--blue-light2); color:var(--blue);border-color:var(--blue)}
.dapei-yellow{background:var(--yellow-light3); color:var(--orange);border-color:var(--yellow)}
.dapei-red{background:var(--red-light); color:var(--red);border-color:var(--red)}
.dapei-green{background:var(--green-light); color:var(--green);border-color:var(--green)}
.dapei-orange{background:var(--yellow-light2); color:var(--orange);border-color:var(--orange)}
.dapei-purple{background:var(--purple-light2); color:var(--purple);border-color:var(--purple)}
.dapei-pink{background:var(--pink-light); color:var(--pink);border-color:var(--pink)}

.dapei-Pending{background:var(--blue-light2); color:var(--blue);border-color:var(--blue)}
.dapei-Completed{background:var(--green-light); color:var(--green);border-color:var(--green)}
 
/*渐变色*/
.jb-yellow{background: linear-gradient(25deg, var(--yellow-light), var( --yellow));}
.jb-purple-dark{background: linear-gradient(25deg, var(--purple), var( --purple-dark));}
.jb-yellow2{background: linear-gradient(198deg, var(--yellow-dark), var( --yellow-light2));}
.jb-yellow-dark{background: linear-gradient(25deg, var(--yellow), var( --yellow-dark));}
.jb-green{background: linear-gradient(45deg, #32dd7d, #009b00);}

/*border*/
.border-gray {border-color:var(--bordergray);}

/*背景*/
.bg-pink-light{background-color:var(--pink-light)}