:root {
    --primary: #006eff;
    --primary-75: #4092ff;
    --primary-50: #7fb6ff;
    --primary-25: #bfdbff;
    --primary-10: #e5f0ff;
    --primary-rgb: 0, 110, 255;

    --success: #09d66b;
    --success-75: #47e090;
    --success-50: #84eab5;
    --success-25: #c1f5da;
    --success-10: #e6fbf0;
    --success-rgb: 9, 214, 107;

    --warning: #ffa600;
    --warning-75: #ffbc40;
    --warning-50: #ffd27f;
    --warning-25: #ffe9bf;
    --warning-10: #fff6e5;
    --warning-rgb: 255, 166, 0;

    --danger: #fa0f6d;
    --danger-75: #fb4b92;
    --danger-50: #fc87b6;
    --danger-25: #fec3da;
    --danger-10: #fee7f0;
    --danger-rgb: 250, 15, 109;

    --purple: #7d00f1;
    --purple-75: #9e40f5;
    --purple-50: #be7ff8;
    --purple-25: #debffb;
    --purple-10: #f2e5fe;
    --purple-rgb: 125, 0, 241;

    --info: #00d2ff;
    --info-75: #40ddff;
    --info-50: #7fe8ff;
    --info-25: #bff4ff;
    --info-10: #e5faff;
    --info-rgb: 0, 210, 255;

    --white: #ffffff;
    --white-rgb: #ffffff;

    --light: #f9fbfd;
    --light-rgb: 249, 251, 253;

    --mist: #edf2f9;
    --mist-rgb: #edf2f9;

    --grey: #cfd6e0;
    --grey-rgb: 207, 214, 224;

    --secondary: #748194;
    --secondary-rgb: 116, 129, 148;
    
    --dark: #212529;
    --dark-rgb: 33, 37, 41;
}

/* 背景颜色背景颜色背景颜色背景颜色 */
.bg-primary {
    background-color: var(--primary) !important;
}
.bg-jelly-primary {
    background-color: var(--primary-10);
    color: var(--primary) !important;
}
.bg-success {
    background-color: var(--success) !important;
}
.bg-jelly-success {
    background-color: var(--success-10);
    color: var(--success) !important;
}
.bg-warning {
    background-color: var(--warning);
}
.bg-jelly-warning {
    background-color: var(--warning-10);
    color: var(--warning) !important;
}
.bg-danger {
    background-color: var(--danger) !important;
}
.bg-jelly-danger {
    background-color: var(--danger-10);
    color: var(--danger) !important;
}
.bg-purple {
    background-color: var(--purple) !important;
}
.bg-jelly-purple {
    background-color: var(--purple-10);
    color: var(--purple) !important;
}
.bg-info {
    background-color: var(--info) !important;
}
.bg-jelly-info {
    background-color: var(--info-10);
    color: var(--info) !important;
}
.bg-white {
    background-color: var(--white) !important;
}
.bg-light {
    background-color: var(--light) !important;
}
.bg-mist {
    background-color: var(--mist) !important;
}
.bg-grey {
    background-color: var(--grey) !important;
}
.bg-secondary {
    background-color: var(--secondary) !important;
}
.bg-jelly-secondary {
    background-color: var(--success-10) !important;
    color: var(--secondary) !important;
}
.bg-dark {
    background-color: var(--dark) !important;
}

/* 文字颜色文字颜色文字颜色文字颜色 */
.text-primary {
    color: var(--primary) !important;
}
.text-success {
    color: var(--success)!important;
}
.text-warning {
    color: var(--warning) !important;
}
.text-danger {
    color: var(--danger) !important;
}
.text-purple {
    color: var(--purple) !important;
}
.text-info {
    color: var(--info) !important;
}
.text-light {
    color: var(--light) !important;
}
.text-mist {
    color: var(--mist) !important;
}
.text-grey {
    color: var(--grey) !important;
}
.text-secondary {
    color: var(--secondary) !important;
}
.text-dark {
    color: var(--dark) !important;
}


/* 按钮颜色按钮颜色按钮颜色按钮颜色 */
.btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: .875rem;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background-color: var(--primary-75);
    border-color: var(--primary-75);
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-jelly-primary {
    background-color: var(--primary-10);
    color: var(--primary) !important;
}
.btn-jelly-primary:hover {
    background-color: var(--primary-25);
}


.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}
.btn-success:hover {
    background-color: var(--success-75);
    border-color: var(--success-75);
}
.btn-outline-success {
    color: var(--success);
    border-color: var(--success);
}
.btn-outline-success:hover {
    background-color: var(--success);
    border-color: var(--success);
}
.btn-jelly-success {
    background-color: var(--success-10);
    color: var(--success) !important;
}
.btn-jelly-success:hover {
    background-color: var(--success-25);
}


.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: white !important;
}
.btn-warning:hover {
    background-color: var(--warning-75);
    border-color: var(--warning-75);
}
.btn-outline-warning {
    color: var(--warning);
    border-color: var(--warning);
}
.btn-outline-warning:hover {
    background-color: var(--warning);
    border-color: var(--warning);
    color: white;
}
.btn-jelly-warning {
    background-color: var(--warning-10);
    color: var(--warning) !important;
}
.btn-jelly-warning:hover {
    background-color: var(--warning-25);
}


.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover {
    background-color: var(--danger-75);
    border-color: var(--danger-75);
}
.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}
.btn-outline-danger:hover {
    background-color: var(--danger);
    border-color: var(--danger);
}
.btn-jelly-danger {
    background-color: var(--danger-10);
    color: var(--danger) !important;
}
.btn-jelly-danger:hover {
    background-color: var(--danger-25);
}


.btn-purple {
    background-color: var(--purple);
    color: white !important;
}
.btn-purple:hover {
    background-color: var(--purple-75);
    border-color: var(--purple-75);
}
.btn-outline-purple {
    color: var(--purple);
    border-color: var(--purple);
}
.btn-outline-purple:hover {
    background-color: var(--purple);
    border-color: var(--purple);
    color: white;
}
.btn-jelly-purple {
    background-color: var(--purple-10);
    color: var(--purple) !important;
}
.btn-jelly-purple:hover {
    background-color: var(--purple-25);
}


.btn-info {
    background-color: var(--info);
    color: white !important;
}
.btn-info:hover {
    background-color: var(--info-75);
    border-color: var(--info-75);
}
.btn-outline-info {
    color: var(--info);
    border-color: var(--info);
}
.btn-outline-info:hover {
    background-color: var(--info);
    border-color: var(--info);
    color: white;
}
.btn-jelly-info {
    background-color: var(--info-10);
    color: var(--info) !important;
}
.btn-jelly-info:hover {
    background-color: var(--info-25);
}


.btn-light {
    background-color: var(--light) !important;
}
.btn-light:hover {
    background-color: #e9eff5 !important;
}
.btn-mist {
    background-color: var(--mist) !important;
}
.btn-mist:hover {
    background-color: #dce5f1 !important;
}
.btn-grey {
    background-color: var(--grey) !important;
}
.btn-grey:hover {
    background-color: #b9c4d3 !important;
}


.btn-secondary {
    background-color: var(--secondary);
    color: white !important;
}
.btn-secondary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
}
.btn-jelly-secondary {
    background-color: var(--secondary-10);
    color: var(--secondary) !important;
}
.btn-jelly-secondary:hover {
    background-color: var(--secondary-25);
}


.btn-dark {
    background-color: var(--dark) !important;
}
.btn-dark:hover {
    background-color: #373c41 !important;
}


/* 边框颜色边框颜色边框颜色边框颜色 */
.border-primary {
    border-color: var(--primary) !important;
}
.border-success {
    border-color: var(--success)!important;
}
.border-warning {
    border-color: var(--warning) !important;
}
.border-danger {
    border-color: var(--danger) !important;
}
.border-purple {
    border-color: var(--purple) !important;
}
.border-info {
    border-color: var(--info) !important;
}
.border-light {
    border-color: var(--light) !important;
}
.border-mist {
    border-color: var(--mist) !important;
}
.border-grey {
    border-color: var(--grey) !important;
}
.border-secondary {
    border-color: var(--secondary) !important;
}
.border-dark {
    border-color: var(--dark) !important;
}



/* alert颜色alert颜色alert颜色alert颜色 */
.alert-primary {
    /* background-color: #91c1ff !important; */
}
.alert-success {
    /* background-color: #a9ea7a !important; */
    /* color: #2d3e21 !important; */
}
.alert-warning {
    /* background-color: #fada95 !important; */
}
.alert-danger {
    /* background-color: var(--danger) !important; */
}
.alert-purple {
    background-color: var(--purple) !important;
}
.alert-info {
    /* background-color: var(--info) !important; */
}
.alert-light {
    background-color: var(--light) !important;
    border-color: var(--light);
}.alert-mist {
    border-color: var(--mist) !important;
    border-color: var(--mist);
}

.link-success {
    color: var(--success)!important;
}
.link-bg-mist:hover {
    background-color: var(--mist);
    color: var(--dark) !important;
}

.shadow {
    box-shadow: 0rem .1rem .6rem rgba(79, 86, 119, 0.1) !important;
}
.shadow-pad {
    box-shadow: 0rem .1rem .6rem rgba(79, 86, 119, 0.2) !important;
}