:root {
    --light: #74829c;
    --dark: #212529;
    --mrbg: #f2f3f5;
    --white: #ffffff;
    --mrblack: #2a2a2b;
    --mrgray: #46494d;
    --gray: #eef0f6;
    --eee: #eeeeee;
    --c666: #666;
    --gray-dark: #313131;
    --yellow: #FFB700;
    --yellow-light: #f8d57b;
    --yellow-light2: #f8eed4;
    --yellow-dark: #ffc400;
    --orange: #ff8500;
    --orange-dark: #ff6a00;
    --blue: #006af7;
    --blue-light: #e0f4f5;
    --blue-light2: #eef6ff;
    --blue-op-075: rgba(0,106,247,0.75);
    --blue-dark: #0e4690;
    --blue-light: #e5f3ff;
    --blue-light-op-075: rgba(0,106,247,0.75);
    --blue-light2: #eef6ff;
    --red: #d50002;
    --red-dark: #e03997;
    --red-light: #fdeced;
    --pink: #f45c8d;
    --pink-light: #f7e5db;
    --green: #38a412;
    --green-light: #e8fbd1;
    --green-dark: #0f9177;
    --purple: #945bca;
    --purple-dark: #7a0087;
    --purple-light: #e1def6;
    --zong: #be5b03;
    --gradient-banner-3: linear-gradient(135deg, #6a77f1 50%, #4b57ca 100%);
    --gradient-blue-light: linear-gradient(135deg, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --gradient-blue: linear-gradient(135deg, #6a77f1 50%, #4b57ca 100%);
    --gradient-blue-2: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --gradient-blue-dark: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --gradient-green-light: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --gradient-green: linear-gradient(135deg, rgb(83, 167, 6) 0%, rgb(33, 133, 208) 100%);
    --gradient-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --gradient-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --gradient-red-dark: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --gradient-gray: rgb(238, 238, 238);
    --gradient-pink: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --gradient-purple: linear-gradient(135deg, #d53c8e 0%, #292391 100%);
    --gradient-purple-light: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --gradient-purple-dark: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --gradient-yellow-1: linear-gradient(135deg, #f6e57f 0%, #ead044 100%);
    --gradient-yellow-2: linear-gradient(135deg, #dfb693 0%, #cb5f59 100%);
    --gradient-yellow-3: linear-gradient(135deg, #faecc5 0%, #d6536d 100%);
    --gradient-yellow-4: linear-gradient(135deg, #efc854 0%, #d5655c 100%);
    --gradient-yellow-5: linear-gradient(135deg, #f1d3a5 0%, #d17974 100%);
    --gradient-yellow-6: linear-gradient(135deg, #eabe70 0%, #c04923 100%);
    --gradient-yellow-7: linear-gradient(135deg, #f2cd47 0%, #c82622 100%);
    --gradient-yellow-8: linear-gradient(135deg, #fbf498 0%, #d680aa 100%);
    --gradient-yellow-9: linear-gradient(135deg, #f6de8c 0%, #e37c50 100%);
    --gradient-yellow-10: linear-gradient(135deg, #eecc5a 0%, #e067bf 100%);
    --gradient-yellow-11: linear-gradient(135deg, #e7a5a2 0%, #faee4f 100%);
    --gradient-purple-1: linear-gradient(125deg, #d3b0f5 0%, #945bca 100%);
    --gradient-purple-2: linear-gradient(125deg, #d67795 0%, #6a4995 100%);
    --gradient-purple-3: linear-gradient(125deg, #d863a1 0%, #83349e 100%);
    --gradient-purple-4: linear-gradient(125deg, #dca998 0%, #6a40be 100%);
    --gradient-purple-5: linear-gradient(125deg, #edcfec 0%, #b85ac3 100%);
    --gradient-purple-6: linear-gradient(125deg, #e6c57a 0%, #98619d 100%);
    --gradient-purple-7: linear-gradient(125deg, #e3cb42 0%, #9943d6 100%);
    --gradient-purple-8: linear-gradient(125deg, #faeec1 0%, #b257f4 100%);
    --gradient-purple-9: linear-gradient(125deg, #eacdfa 0%, #ad5dbf 100%);
    --gradient-purple-10: linear-gradient(125deg, #e277d7 0%, #482db3 100%);
    --gradient-purple-11: linear-gradient(125deg, #bfa2f8 0%, #7d76db 100%);
}


/*文字颜色*/
.color-mrbg {
    color: var(--mrbg)
}

.color-dark {
    color: var(--dark)
}

.color-light {
    color: var(--light)
}

.color-white {
    color: var(--white)
}

.color-333 {
    color: #333
}

.color-666 {
    color: #666
}

.color-999 {
    color: #999
}

.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-gray {
    background-color: var(--gray)
}

.bg-eee {
    background-color: var(--eee)
}

.bg-mrbg {
    background-color: var(--mrbg)
}

.bg-purple {
    background-color: var(--purple);
}
/*背景文字搭配*/
.dapei-blue {
    background: var(--blue-light2);
    color: var(--blue);
    border-color: var(--blue)
}

.dapei-yellow {
    background: var(--yellow-light);
    color: var(--yellow);
    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-light);
    color: var(--purple);
    border-color: var(--purple)
}

.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));
}

.gradient-blue-light {
    background: var(--gradient-blue-light);
}

.gradient-blue {
    background: var(--gradient-blue);
}

.gradient-blue-2 {
    background: var(--gradient-blue-2);
}

.gradient-blue-dark {
    background: var(--gradient-blue-dark);
}

.gradient-green-light {
    background: var(--gradient-green-light);
}

.gradient-green {
    background: var(--gradient-green);
}

.gradient-orange {
    background: var(--gradient-orange);
}

.gradient-red {
    background: var(--gradient-red);
}

.gradient-red-dark {
    background: var(--gradient-red-dark);
}

.gradient-gray {
    background: var(--gradient-gray);
    color: #000 !important;
}

.gradient-pink {
    background: var(--gradient-pink);
}

.gradient-purple {
    background: var(--gradient-purple);
}

.gradient-purple-light {
    background: var(--gradient-purple-light);
}

.gradient-purple-dark {
    background: var(--gradient-purple-dark);
}


.gradient-yellow-1 {
    background: var(--gradient-yellow-1);
}

.gradient-yellow-2 {
    background: var(--gradient-yellow-2);
}

.gradient-yellow-3 {
    background: var(--gradient-yellow-3);
}

.gradient-yellow-4 {
    background: var(--gradient-yellow-4);
}

.gradient-yellow-5 {
    background: var(--gradient-yellow-5);
}

.gradient-yellow-6 {
    background: var(--gradient-yellow-6);
}

.gradient-yellow-7 {
    background: var(--gradient-yellow-7);
}

.gradient-yellow-8 {
    background: var(--gradient-yellow-8);
}

.gradient-yellow-9 {
    background: var(--gradient-yellow-9);
}

.gradient-yellow-10 {
    background: var(--gradient-yellow-10);
}

.gradient-yellow-11 {
    background: var(--gradient-yellow-11);
}


.gradient-purple-1 {
    background: var(--gradient-purple-1);
}

.gradient-purple-2 {
    background: var(--gradient-purple-2);
}

.gradient-purple-3 {
    background: var(--gradient-purple-3);
}

.gradient-purple-4 {
    background: var(--gradient-purple-4);
}

.gradient-purple-5 {
    background: var(--gradient-purple-5);
}

.gradient-purple-6 {
    background: var(--gradient-purple-6);
}

.gradient-purple-7 {
    background: var(--gradient-purple-7);
}

.gradient-purple-8 {
    background: var(--gradient-purple-8);
}

.gradient-purple-9 {
    background: var(--gradient-purple-9);
}

.gradient-purple-10 {
    background: var(--gradient-purple-10);
}

.gradient-purple-11 {
    background: var(--gradient-purple-11);
}

.bg-mrbg {
    background-color: var(--mrbg)
}

.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(--c666);
    border: 1px solid var(--c666);
}

    .btn-gray.hover-fb:hover {
        color: var(--c666)
    }

.btn-orange {
    background-color: var(--orange);
    border: 1px solid var(--orange);
}

    .btn-orange.hover-fb:hover {
        color: var(--orange)
    }

.btn-jb-orange {
    background: linear-gradient(45deg, var(--orange), var(--red-dark));
}

.btn-jb-green {
    background: linear-gradient(45deg, var(--green), var(--green-dark));
}

.btn-jb-red {
    background: linear-gradient(45deg, var(--red), var(--red-dark));
}

.btn-jb-blue {
    background: linear-gradient(-45deg, var(--blue), #2299ee);
}

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

/*背景*/
.bg-mrbg {
    background: var(--mrbg);
}

.bg-white {
    background: #ffffff;
}

.bg-light {
    background: var(--light);
}

.bg-dark {
    background: var(--dark);
}

.bg-black {
    background: #000000;
}

.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)
}

.bg-pink-light {
    background-color: var(--pink-light)
}