:root {
    --color-success: #47AB5E;
    --color-success-1: #61AA76;
    --color-success-2: #83D29F;
    --color-success-3: #ADEFD3;
    --color-accent: #972078;
    --color-accent-1: #842266;
    --color-accent-2: #B857B6;
    --color-accent-3: #F08CF4;
    --color-primary: #2D4A7C;
    --color-primary-1: #3D59A8;
    --color-primary-2: #4C68D4;
    --color-primary-3: #6A86FF;
    --color-danger: #AB2247;
    --color-danger-1: #BB3559;
    --color-danger-2: #CB486B;
    --color-danger-3: #EA7090;
}


.bg-success {
    background-color: var(--color-success) !important;
    color: #fff;
}

.text-success {
    color: var(--color-success);
}

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success-1);
    color: #fff;
}

    .btn-success:hover {
        background-color: var(--color-success-1) !important;
    }


.btn-outline-success {
    background-color: #fff;
    border-color: var(--color-success) !important;
    border-width: 0.15rem;
    color: var(--color-success) !important;
}

    .btn-outline-success:hover {
        background-color: var(--color-success-1) !important;
        border-color: var(--color-success) !important;
        color: #fff !important;
    }

.bg-success-1 {
    background-color: var(--color-success-1);
    color: #fff;
}

.bg-success-2 {
    background-color: var(--color-success-2);
    color: #fff;
}

.bg-success-3 {
    background-color: var(--color-success-3);
    color: #fff;
}

.bg-success-disable {
    background-color: #60B97A;
}

.bg-success-1-disable {
    background-color: #AEECC5;
}

.bg-success-2-disable {
    background-color: #E2FEEF;
}

.bg-success-3-disable {
    background-color: #DFFFEE;
}

.bg-accent {
    background-color: var(--color-accent);
}

.text-accent {
    color: var(--color-accent)!important;
}

.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent-1);
    color: #fff !important;
}

    .btn-accent:hover {
        background-color: var(--color-accent-1) !important;
        color: #fff !important;
    }


.bg-primary {
    background-color: var(--color-primary) !important;
    color: #fff;
}

.text-primary {
    color: var(--color-primary) !important;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-1);
    color: #fff;
}

    .btn-primary:hover {
        background-color: var(--color-primary-1) !important;
    }

.btn-outline-primary {
    background-color: #fff;
    border-color: var(--color-primary) !important;
    border-width: 0.15rem;
    color: var(--color-primary) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--color-primary-1) !important;
        border-color: var(--color-primary) !important;
        color: #fff !important;
    }


.bg-primary-1 {
    background-color: var(--color-primary-1);
    color: #fff;
}


.text-primary-1 {
    color: var(--color-primary-1) !important;
}

.btn-primary-1 {
    background-color: var(--color-primary-1);
    border-color: var(--color-primary-2);
    color: #fff;
}

    .btn-primary-1:hover {
        background-color: var(--color-primary-2) !important;
        color: #fff !important;
    }

.btn-outline-primary-1 {
    background-color: #fff;
    border-color: var(--color-primary-1) !important;
    border-width: 0.15rem;
    color: var(--color-primary-1) !important;
}

    .btn-outline-primary-1:hover {
        background-color: var(--color-primary-2) !important;
        border-color: var(--color-primary-1) !important;
        color: #fff !important;
    }


.bg-primary-2 {
    background-color: var(--color-primary-2);
    color: #fff;
}


.text-primary-2 {
    color: var(--color-primary-2)!important;
}

.btn-primary-2 {
    background-color: var(--color-primary-2);
    border-color: var(--color-primary-3);
    color: #fff;
}

    .btn-primary-2:hover {
        background-color: var(--color-primary-3) !important;
        color: #fff !important;
    }

.btn-outline-primary-2 {
    background-color: #fff;
    border-color: var(--color-primary-2) !important;
    border-width: 0.15rem;
    color: var(--color-primary-2) !important;
}

    .btn-outline-primary-2:hover {
        background-color: var(--color-primary-3) !important;
        border-color: var(--color-primary-2) !important;
        color: #fff !important;
    }


.bg-primary-3 {
    background-color: var(--color-primary-3);
    color: #fff;
}


.text-primary-3 {
    color: var(--color-primary-3) !important;
}

.btn-primary-3 {
    background-color: var(--color-primary-3);
    border-color: var(--color-primary-1);
    color: #fff;
}

    .btn-primary-3:hover {
        background-color: var(--color-primary-1) !important;
        color: #fff !important;
    }

.btn-outline-primary-3 {
    background-color: #fff;
    border-color: var(--color-primary-1) !important;
    border-width: 0.15rem;
    color: var(--color-primary-3) !important;
}

    .btn-outline-primary-3:hover {
        background-color: var(--color-primary-1) !important;
        border-color: var(--color-primary-3) !important;
        color: #fff !important;
    }



.bg-danger {
    background-color: var(--color-danger) !important;
    color: #fff;
}

.text-danger {
    color: var(--color-danger) !important;
}

.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger-1);
    color: #fff;
}

    .btn-danger:hover {
        background-color: var(--color-danger-1) !important;
    }

.btn-outline-danger {
    background-color: #fff;
    border-color: var(--color-danger) !important;
    border-width: 0.15rem;
    color: var(--color-danger) !important;
}

    .btn-outline-danger:hover {
        background-color: var(--color-danger-1) !important;
        border-color: var(--color-danger) !important;
        color: #fff !important;
    }


.bg-danger-1 {
    background-color: var(--color-danger-1);
    color: #fff;
}


.text-danger-1 {
    color: var(--color-danger-1) !important;
}

.btn-danger-1 {
    background-color: var(--color-danger-1);
    border-color: var(--color-danger-2);
    color: #fff;
}

    .btn-danger-1:hover {
        background-color: var(--color-danger-2) !important;
        color: #fff !important;
    }

.btn-outline-danger-1 {
    background-color: #fff;
    border-color: var(--color-danger-1) !important;
    border-width: 0.15rem;
    color: var(--color-danger-1) !important;
}

    .btn-outline-danger-1:hover {
        background-color: var(--color-danger-2) !important;
        border-color: var(--color-danger-1) !important;
        color: #fff !important;
    }


.bg-danger-2 {
    background-color: var(--color-danger-2);
    color: #fff;
}


.text-danger-2 {
    color: var(--color-danger-2) !important;
}

.btn-danger-2 {
    background-color: var(--color-danger-2);
    border-color: var(--color-danger-3);
    color: #fff;
}

    .btn-danger-2:hover {
        background-color: var(--color-danger-3) !important;
        color: #fff !important;
    }

.btn-outline-danger-2 {
    background-color: #fff;
    border-color: var(--color-danger-2) !important;
    border-width: 0.15rem;
    color: var(--color-danger-2) !important;
}

    .btn-outline-danger-2:hover {
        background-color: var(--color-danger-3) !important;
        border-color: var(--color-danger-2) !important;
        color: #fff !important;
    }


.bg-danger-3 {
    background-color: var(--color-danger-3);
    color: #fff;
}


.text-danger-3 {
    color: var(--color-danger-3) !important;
}

.btn-danger-3 {
    background-color: var(--color-danger-3);
    border-color: var(--color-danger-1);
    color: #fff;
}

    .btn-danger-3:hover {
        background-color: var(--color-danger-1) !important;
        color: #fff !important;
    }

.btn-outline-danger-3 {
    background-color: #fff;
    border-color: var(--color-danger-1) !important;
    border-width: 0.15rem;
    color: var(--color-danger-3) !important;
}

    .btn-outline-danger-3:hover {
        background-color: var(--color-danger-1) !important;
        border-color: var(--color-danger-3) !important;
        color: #fff !important;
    }