.bg-animation-main {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.bg-animation-primary {
    background: linear-gradient(-45deg, #52caee, #3c53e7, #23a6d5, #23c6d5);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
.bg-animation-danger {
    /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #d5237f, #d52347);*/
    background: linear-gradient(-45deg, #ee5752, #c61035, #d52355, #e73c64);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.bg-animation-success {
    background: linear-gradient(-45deg, #26ba61, #12b058, #23d588, #1ec8af);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.bg-animation-pink {
    background: linear-gradient(-45deg, #f06292, #e91e63, #ec407a, #f48fb1);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.bg-animation-warning {
    background: linear-gradient(-45deg, #ffc100, #ff4d00, #ff9a00, #ffc100);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.bg-animation-simple {
    background: linear-gradient(-45deg, #591C37, #343a40);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.bg-animation-complex {
    background: linear-gradient(-45deg, #7e2b50, #591C37, #371c59, #343a40);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.bg-animation-dark {
    background: linear-gradient(-45deg, #373b40, #272c30, #51585f, #616970);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.bg-animation-light {
    background: linear-gradient(-45deg, #efefef, #e5e5e5, #efefef, #ffffff);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.bg-animation-purple {
    background: linear-gradient(-45deg, #483554, #714064, #a95f7c, #f28997);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.bg-animation-body {
    background: linear-gradient(-45deg, #ced4da, #e9ecef, #f8f9fa);
    background-size: 1000% 1000%;
    animation: gradient 15s ease infinite;
}

.bg-light-custom {
    background-color: #F5F6FA;
}

.text-animation-primary {
    color: #3c53e7;
}
.text-animation-danger {
    color: #ee5752;
}
.text-animation-success {
    color: #26ba61;
}
.text-animation-warning {
    color: #ff9a00;
}
.text-animation-purple {
    color: #714064;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}